Query options getter / setters in queries hooks

[lucien-perouze-cezembre]

Here is my use case :

I have an endpoint to stay authenticated : /sessions/active
Which take a bearer Token in the Authorization HTTP header and returns a new refreshed bearer token with an expiration date and other datas of the session (userId, ...).

I want to build a hook that returns the current session and automatically refresh it before it expires. I began with something like that :

export function useSession(): UseQueryResult<Session> {
  return useQuery<unknown, unknown, Session>(
    'session',
    async () => {
      return await apiRequest({
        route: '/sessions/active',
        bearer_token: // Need current bearer token here
      });
    },
    onSuccess: (session: Session) => {
      // Need to set the cache / stale here based on session
    },
  );
}

But doing so I faced two issues :

1. Inside the queryFn I cannot access the current session easily. I have to get it via queryClient.getQueryData('session'). It feels heavy to search through the entire client considering that I'm already in the context I need.
2. Same when the session is fetched, I need to set the options based on what I received and there is no easy way to do so.

What I would propose is to pass down more context to the query function and to the hooks. It could look like something like this :

export function useSession(): UseQueryResult<Session> {
 return useQuery<unknown, unknown, Session>(
   'session',
   async ({ data }: UseQueryResult<Session>) => { // Current query state
     return await apiRequest({
       route: '/sessions/active',
       bearer_token: data?.bearer_token,
     });
   },
   onSuccess: (session: Session, options: Pick<UseQueryOptions, 'staleTime' | 'refetchInterval' | ...>) => {
     // Selection of relevants options that could be set at that point.
     options.staleTime = calcStaleTime(session.expires_at); // Could be set with immer JS.
   },
 );
}

To support this last point I think it's a better pattern to let the backend decides the lifetime of datas. The nature of datas, their modifications rates etc is known by the backend and could vary over time. HTTP defines a whole range of cache / stale headers that are really usefull to pass those informations.

What do you think about it ?

[TkDodo]

I have to get it via queryClient.getQueryData('session'). It feels heavy to search through the entire client considering that I'm already in the context I need.

This is not a "search" operation - it's basically accessing a js object by a key. Yes we could pass the "previousData" to the QueryFunctionContext, but we would basically do the same thing. I think calling queryClient.getQueryData in the queryFn is fine. The complete key is in the context, so you can do:

useQuery(key, ({ queryKey }) => {
  const previousData = queryClient.getQueryData(queryKey)
}

// Selection of relevants options that could be set at that point.

we certainly can't just mutate options that we pass into a function, and also certainly not for a callback.

if you want to control query options by a response from the current query, I would suggest something like this:

https://twitter.com/TkDodo/status/1378732290789011457

const useHeaderAwareQuery = (key, queryFn, options) => {
  const [headerOptions, setHeaderOptions] = React.useState();
  return useQuery(key, queryFn, {
    ...options,
    ...headerOptions,
    onSuccess: (response) => {
      const cacheControl = parseCacheControl(response.headers["cache-control"]);
      const maxAge = cacheControl?.["max-age"] ?? 0;
      setHeaderOptions({
        staleTime: maxAge * 1000
      });
    }
  });
};

it doesn't have to come from a header of course, it can also be set by something that's part of the regular response data.