NotZeldaN
tRPC11mo ago
7 replies
NotZelda

How to define per route staleTime on queryClient?

It looks like I am unable to override the default stale time provided to react query client, no matter how I define the the route. Is TRPC overriting these dafult somewhere down the chain?

export const createQueryClient = () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 1000 * 60 * 30,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === "pending",
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

  queryClient.setQueryDefaults(["performanceMetrics", "getEmployeeMetrics"], {
    staleTime: Infinity,
  });

  return queryClient;
};


By creating the queryClient in this way, I would expect the api route: api.performanceMetrics.getEmployeeMetrics to have an infinite stale time, but it still coming in with the default 30 seconds.

I would like to avoid having to wrap every route with my own definition of staleTime, however I also want to make sure no matter why I call these hooks in my app they all have the same staleTime.
Was this page helpful?