Export QueryClientContext (or getQueryClientContext) for access by class components

[steevsachs]

Currently the context used by the QueryClientProvider is not exported or exposed by react-query, which means workarounds are required to access the query client outside of a function component where useQueryClient can be implemented.

Is there any reason not to export either QueryClientContext or getQueryClientContext from QueryClientProvider.tsx? Happy to make a PR if this would be acceptable.

[TkDodo]

it's an implementation detail the library uses react-context under the hood. If you want to use it in class components, a render props wrapper is the best way to do it:

const WithQuery = ({ queryKey, queryFn, options, children }) => children(useQuery(queryKey, queryFn, options))
const WithQueryClient = (children) => children({ queryClient: useQueryClient() })

usage in render of a class component:

<WithQuery queryKey="todos" queryFn={fetchTodos}>
  ({ data, isLoading, isError } => ...
</WithQuery>

<WithQueryClient>
  {(queryClient) => ... }
</WithQueryClient>

[steevsachs]

Good call, that’s a great point and I appreciate the suggestion!

Thanks for taking the time to reply!