itsravenous Posts

itsravenous

•Created by itsravenous on 5/16/2023 in #❓-help

Typing a shared TRPC provider for testing

Context: - We have a monorepo with several micro-frontends which use Next. - We're moving to using tRPC to communicate between the front end and Next backend - We test our components with React Testing Library - We have a shared package for our testing utils, including a render method that renders a component for testing with all required providers (Theme, i18n, etc etc) Problem: We want to add a tRPC provider to the providers that our custom render method wraps around the component under test, so that components that use tRPC queries/mutations can be tested with RTL. The basic idea is something like this:

import { AnyRouter } from '@trpc/server';

export const testTRPC = createTRPCReact<AnyRouter>();

export const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const queryClient = new QueryClient();

  const trpcClient = testTRPC.createClient({
    links: [
      httpLink({
        url: `http://localhost/trpc`,
      }),
    ],
  });

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

import { AnyRouter } from '@trpc/server';

export const testTRPC = createTRPCReact<AnyRouter>();

export const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const queryClient = new QueryClient();

  const trpcClient = testTRPC.createClient({
    links: [
      httpLink({
        url: `http://localhost/trpc`,
      }),
    ],
  });

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

but TypeScript complains about testTRPC.createClient:

Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

and testTRPC.Provider:

Property 'Provider' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

Property 'Provider' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

I'm guessing the usage of AnyRouter is the problem here, but really not sure what type I can provide here, since it could be the AppRouter from any one of our micro-frontends - perhaps something using generics?

9 replies