useQueries options: queryClient parameter
The queryClient option (optional, type QueryClient) allows providing a custom QueryClient. If not provided, the QueryClient from the nearest context will be used.
TanStack Query · React · all subjects
queries
310 notes in this subject, read out of this brain and free to use. This is page 6 of 6.
useQueries options: combine parameter
The combine option (optional, type function) accepts a callback that receives UseQueriesResults and can combine the results of queries into a single value. The result is structurally shared to be as referentially stable as possible.
useQueries select parameter TypeScript typing workaround 2: queryOptions helper
Define queries using the queryOptions helper to resolve types in a single object before reaching useQueries. Example: const postOptions = (id: number) => queryOptions({ queryKey: ['post', id], queryFn: () => fetchPost(id), select: (data) => data.title, }); useQueries({ queries: [postOptions(1), postOptions(2)] })
useQueries spread queryOptions with overriding select pitfall
When spreading a queryOptions result to override its select inline, the overriding select still falls back to unknown type. To fix this, wrap the spread in queryOptions again so the override is resolved before reaching useQueries.
useQueries spread queryOptions with overriding select workaround
To properly override select when spreading queryOptions in useQueries, wrap the entire spread in queryOptions: useQueries({ queries: [queryOptions({ ...postOptions(1), select: (data: Post) => data.title, })], })
useQueries select parameter TypeScript typing limitation
Unlike useQuery, useQueries cannot infer the data argument of an inline select function from its sibling queryFn. When select is written inline in a useQueries query object, the data parameter falls back to unknown type due to TypeScript limitations.
useQueries select parameter TypeScript typing workaround 1: explicit annotation
To fix the unknown type for select data in useQueries, explicitly annotate the select parameter: { queryKey: ['post', 1], queryFn: () => fetchPost(1), select: (data: Post) => data.title, }
useQueryClient hook signature and purpose
The useQueryClient hook returns the current QueryClient instance. It is imported from '@tanstack/react-query' and can be called with an optional QueryClient parameter to use a custom instance, otherwise it returns the QueryClient from the nearest context.
useQueryErrorResetBoundary hook purpose
The useQueryErrorResetBoundary hook resets any query errors within the closest QueryErrorResetBoundary. If no QueryErrorResetBoundary is defined, it resets query errors globally.
useQueryErrorResetBoundary with react-error-boundary example
import { useQueryErrorResetBoundary } from '@tanstack/react-query' import { ErrorBoundary } from 'react-error-boundary' const App = () => { const { reset } = useQueryErrorResetBoundary() return ( <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => ( <div> There was an error! <Button onClick={() => resetErrorBoundary()}>Try again</Button> </div> )} > <Page /> </ErrorBoundary> ) } This example shows how to integrate useQueryErrorResetBoundary with the react-error-boundary ErrorBoundary component to reset query errors when the user clicks a retry button.