Update react-query depency to require at least v5.83 #10838
Conversation
| @@ -1174,6 +1174,26 @@ const ProductList = () => ( | |||
| ) | |||
| ``` | |||
|
|
|||
| ## Enabling Data Fetching Conditionally | |||
There was a problem hiding this comment.
I'm not sure about where to put this documentation as it's actually useGetList that we configure.
| @@ -57,8 +57,7 @@ | |||
| "react-router-dom": "^6.28.1 || ^7.1.1" | |||
| }, | |||
| "dependencies": { | |||
| "@tanstack/react-query": "^5.21.7", | |||
| "clsx": "^2.1.1", | |||
| @@ -248,7 +248,6 @@ export type UseInfiniteGetListOptions< | |||
| GetInfiniteListResult<RecordType>, | |||
| ErrorType, | |||
| InfiniteData<GetInfiniteListResult<RecordType>>, | |||
| GetInfiniteListResult<RecordType>, | |||
There was a problem hiding this comment.
does that mean that the type of UseInfiniteQueryOptions has changed in react-query? That would be a breaking change.
There was a problem hiding this comment.
No I believe we used it incorrectly before but it wasn't detected until this update
There was a problem hiding this comment.
I think it's due to TanStack/query#8956. It doesn't seem to be a breaking change.
| @@ -176,7 +176,7 @@ export const useGetList = < | |||
| } | |||
| : result, | |||
| [result] | |||
| ) as UseQueryResult<RecordType[], Error> & { | |||
| ) as unknown as UseQueryResult<RecordType[], Error> & { | |||
There was a problem hiding this comment.
Question: Why do we only need to do that when calling dataProvider.getList() and not for every other usage of useQuery (e.g. useGetOne) ?
There was a problem hiding this comment.
Because useGetOne returns the same format as react query and we made the decision to do things differently in all hooks that also return a total. Instead of data.total we wanted to have total directly on the result.
There was a problem hiding this comment.
For the record, I'd love to change that in v6
| const ConditionalDataFetchingView = () => { | ||
| const context = useListContext(); | ||
|
|
||
| if (context.filterValues.q == null || context.filterValues.q === '') { | ||
| return ( | ||
| <CardContentInner> | ||
| Type a search term to fetch data | ||
| </CardContentInner> | ||
| ); | ||
| } | ||
|
|
||
| return <BookList />; | ||
| }; |
There was a problem hiding this comment.
This story is working, but since you are rendering a different child when the filter condition is not true, we can't really tell if the dataProvider is called or not. It would help to enable the fakerest debug logs.
docs/List.md
Outdated
| context.filterValues.q == null || | ||
| context.filterValues.q === '' ? ( |
There was a problem hiding this comment.
Too bad you copied the wrong condition: in the docs the condition was q.length > 2 and not q !== '' 😅
fzaninotto
changed the title
Problem
We received some requests and questions for enabling list components data fetching conditionally.
It's actually easier to do with react-query versions more recent than the one we install by default.
Solution
How To Test
Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureAlso, please make sure to read the contributing guidelines.