ItsWendell•12mo ago

Deduping is broken, but is being batched

Hi all, We're using TRPC for our React Native app, while doing some testing, I saw in my server logs that the requests don't seem to be deduplicated on the client side, but are batched to the server.

/trpc/drivers.getMapboxToken,drivers.getStatus,users.current,users.current,users.current,settings.get,drivers.getStatus,drivers.getMapboxToken,users.current

/trpc/drivers.getMapboxToken,drivers.getStatus,users.current,users.current,users.current,settings.get,drivers.getStatus,drivers.getMapboxToken,users.current

Here you can see that these requests are being made twice, this is for one active client, not sure why this is or if this is due potentially React Query. Versions being used: 10.37.1 for client / server React Query: ^4.32.6 What could this possibly be? Here's our TRPC Provider (combined some of the files):

export const trpc = createTRPCReact<AppRouter>();

export const createTrpcClient = () => {
  return trpc.createClient({
    transformer: superjson,
    links: [
      httpBatchLink({
        url: `${apiUrl}/trpc`,
        headers: getHeaders,
      }),
    ],
  });
};

export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        queryCache: trpcQueryCache,
      }),
  );
  const [trpcClient] = useState(() => createTrpcClient());

  useEffect(() => {
    console.debug("[TrpcProvider] Listening for AppState changes", Platform.OS);
    const subscription = AppState.addEventListener(
      "change",
      async (status: AppStateStatus) => {
        console.info(
          `[TrpcProvider] AppState changed to ${status}, setting onlineManager and focusManager`,
        );
        focusManager.setFocused(status === "active");
      },
    );

    return () => {
      console.debug("[TrpcProvider] Unsubscribing from AppState changes");
      subscription.remove();
    };
  }, []);

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};

export const trpc = createTRPCReact<AppRouter>();

export const createTrpcClient = () => {
  return trpc.createClient({
    transformer: superjson,
    links: [
      httpBatchLink({
        url: `${apiUrl}/trpc`,
        headers: getHeaders,
      }),
    ],
  });
};

export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        queryCache: trpcQueryCache,
      }),
  );
  const [trpcClient] = useState(() => createTrpcClient());

  useEffect(() => {
    console.debug("[TrpcProvider] Listening for AppState changes", Platform.OS);
    const subscription = AppState.addEventListener(
      "change",
      async (status: AppStateStatus) => {
        console.info(
          `[TrpcProvider] AppState changed to ${status}, setting onlineManager and focusManager`,
        );
        focusManager.setFocused(status === "active");
      },
    );

    return () => {
      console.debug("[TrpcProvider] Unsubscribing from AppState changes");
      subscription.remove();
    };
  }, []);

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};

1 Reply

ItsWendell•12mo ago

Don't know the exact cause, but we managed to remove the custom trpcQueryCache and use the built-in one which might have fixed the problem, we used it to evict the cache after logout but are now using useQueryClient() + queryClient.clear() instead.