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

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

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

Deduping is broken, but is being batched

Similar Threads

Similar Threads

Similar Threads