NotZelda Posts

NotZelda

•Created by NotZelda on 3/13/2025 in #❓-help

What are the best practices for keeping TRPC and ts-server fast?

I decided to migrate my entire app to TRPC over a couple days as I identified it was a great solution for my use case. However, now my typescript auto-complete and typing checking appear to be much slower. I think TRPC is still the best solution, I'm just curious if there are good practices to follow to ensure that my ts-server stays fast as I scale even further. ts-go may help with this in the future, but for now I'm stuck waiting a few seconds for intellisense. Anyone have any resources I can review?

6 replies

TtRPC

•Created by NotZelda on 3/3/2025 in #❓-help

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;
};

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.

8 replies