TanStackT
TanStack•3y ago•
8 replies
safe-amethyst

custom useQuery

Hey guys, ive been working on this and stumping myself for actually 8 hours today. I figured it would be pretty easy to create a useAuthenticatedQuery hook to simply respond with the access token in the queryFn, but with typescript it has been a total nightmare. Any help would be appreciated

 const {accessToken} = useAuth()
 const subscriptionQuery = useQuery({
   queryKey: ["subscription", accessToken],
   queryFn: () => {
     return api.getSubscription(accessToken);
   },
});

This is the default query that im using out of the box in all of my screens. I dont want to add the access token to the key every time manually, and I dont want to call the useAuth hook for the access token every time.

this code is close to what i want to accomplish (roughly) but typescript has made it hell. 

const useAuthenticatedQuery = (options: UseQueryOptions) => {
  const { accessToken } = useAuth();

  return useQuery({
    ...options,
    queryKey: [options.queryKey, accessToken],
    queryFn: (context) => {
      return options && options.queryFn && options.queryFn({ ...context, accessToken });
    },
  });
};

I understand that i could not attach the access token as context, and rather call context.queryKey and get it from that array, but I cannot add the access token as a query key without typescript throwing a fit. (err below)

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ queryKey: (string | QueryKey | undefined)[]; queryFn: (context: any) => unknown; context?: Context<QueryClient | undefined> | undefined; enabled?: boolean | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.ts(2769)


Any help is appreciated
Was this page helpful?