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

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

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

AnyRouter

is the problem here, but really not sure what type I can provide here, since it could be the

AppRouter

AppRouter

from any one of our micro-frontends - perhaps something using generics?

Typing a shared TRPC provider for testing

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

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

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

AnyRouter

is the problem here, but really not sure what type I can provide here, since it could be the

AppRouter

AppRouter

from any one of our micro-frontends - perhaps something using generics?

Typing a shared TRPC provider for testing

Similar Threads

Typing a shared TRPC provider for testing

Similar Threads

Similar Threads

Similar Threads