Pass objects to query-functions

[nyn3x]

Hi,

I was wondering, if there is any other way to pass parameters to query functions, than the queryKey. I'm currently using a pattern where I write a custom-hook to my queries, which makes it super easy to consume a query in a components. Within my query-functions I'm using an axios-instance, which is handled by a context (called ApiContext). So in my custom-hook I'm getting this instance from the context, but how can I pass this to the function? If I put this in the queryKey this axios instance will end up in the cache-key - that's not what I would like.

This is my current implementation for a generic hook:

export function useGetData<TResult, TQueryKey extends QueryKey = QueryKey, TParam = undefined>(
  DataFunction: QueryFunction<TResult, [TQueryKey, AxiosInstance, TParam?]>,
  technicalContext: string,
  customErrorMsg: string,
  qkey: TQueryKey,
  param?: TParam
): UseQueryResult<TResult, AxiosError> {
  const { logAxiosError } = useErrorLogger();
  const { api } = useContext(ApiContext);

  const queryObj: UseQueryOptions<TResult, AxiosError, TResult, [TQueryKey, AxiosInstance, TParam?]> = {
    queryKey: [qkey, api, param],
    queryFn: DataFunction,
    onError: (err) => logAxiosError("Error loading " + technicalContext, customErrorMsg, err),
  };
  return useQuery(queryObj);
}

And I use it like this:

async function getOrdersCount({ queryKey }: QueryFuncData): Promise<number> {
  const [, api] = queryKey;
  const response = await api.get("/orders");
  return response.data;
}
export const useGetOrdersCount = (): UseQueryResult<number, AxiosError> =>
  useGetData<number, string>(
    getOrdersCount,
    "Error in OrdersCount",
    "Error while loading the number of orders",
    "orderCount"
  );

[TkDodo]

Sorry, I'm not following. What are you trying to solve, and where is the problem in the posted code 😅 ?

[nyn3x]

I want to pass an instance of AxiosInstance to my query-function. The only way I found was by putting this in the queryKey - but that would then use this object as a key for the cache - right? That would be necessary, as the AxiosInstance will for all queries be the same.

[TkDodo]

hmm, what stops you from doing (code shortened for brevity):

const useGetData = (dataFunction) => {
  const { api } = useContext(ApiContext)

  return useQuery({
    queryFn: (context) => dataFunction(api, context)
  })
}

[Steve-651]

This is the problem I was having and this solved it, so thank you! I'm still a beginner to react, so I completely forgot I could make my own context. 😅