Providing a configured client as context to the query function

[strickc]

I am looking for a way to pass a configured client to every queryFunction, similar to how you can set up an extraArgument on a Redux thunk for this purpose (which is exactly what we do in the codebase I'm migrating to ReactQuery).

I was expecting there to be a way to set it up on the QueryClient similar to:

const queryClient = new QueryClient({
  context: {
    clientProvider: new ClientProviderWithAuth(settings);
  },
})

and then use it in the query function like:

useQuery({
  ...
  queryFn: ({context}) => {
     context.clientProvider.xyzService.getXyz();
  }
});

I'm assuming defaultOptions.meta is not the right place for this, as it would get overridden for any query that is setting other metadata. The most likely answer that I am thinking of is to use a ContextProvider, but it seems unwieldy to have a useContext hook next to every useQuery hook, along with passing that into the queryFn.

Is there another way to do this? Thanks!

[TkDodo]

if the client can't be a singleton for whatever reason, put it in react context and read it next to the QueryFunction. However, you have to make sure that you don't run into stale closure issues: https://twitter.com/TkDodo/status/1649786455852478465

[TkDodo]

I still think Auth should live outside of react 🤷

[antoantonydh]

@TkDodo I am using the client from React context and read it next to queryFunction. But it end up with stale closure issue. I am using v3.

export function useRiderDetails(id?: string): UseQueryResult<JsonRiderTrackingV2> {
  const {getRiderTracking} = useRiderTrackingAPI();
  const logger = useLogger();

  return useQuery(
    ['items', id, 'riderDetails'],
    async () => {
      try {
        return await getRiderTracking(order);
      } catch (error) {
        logger.error('something went wrong', error, {id});
        throw error;
      }
    },
    {enabled: !!id},
  );
}

useRiderTrackingAPI is actually getting a function which uses axios internally.

export function useRiderTrackingAPI(): OrderApiContextType {
  const {riderTrackingApi} = useApiClient();

export const ApiClientProvider: FC<PropsWithChildren<unknown>> = ({children}) => {
  const {httpClient} = useHttp();

export const HttpProvider: FC<PropsWithChildren<HttpProviderProps>> = ({
  children,
  baseUrl = '',
  noAuthRequired,
}) => {
  const httpClientRef = useRef<AxiosInstance>();
  if (!httpClientRef.current) {
    httpClientRef.current = axios.create();
  }
  const httpClient: AxiosInstance = httpClientRef.current;

So I am getting an issue where react query calling old instance of getRiderTracking when query invalidated. Is this expected?

[TkDodo]

kind of. Everything that’s dynamic and is used in the query function must be part of the queryKey to avoid this (we have a lint rule for that). I’m not sure what changes in your httpClient on the fly that warrants keeping it in the component scope? Ideally, you’d just have a const httpClient that you create outside of react and then import.

[antoantonydh]

Thank you for the detailed reply. yes, you are right, but we have a module federation setup, where each plugin has its own http client. As a result, every time plugin mounts, it gets a new httpClient reference.

I noticed this issue happens when plugin remounts + if any existing query is not staled (30 sec configured) and try to call invalidateQueries on that key. Then it uses the previous instance of getRiderTracking that is from the first mount.

[TkDodo]

you have the client on a ref already, so if you put the whole ref (instead of the .current) into the provider and then read from the ref in the queryFn, it should work imo.