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?
JS
Jökull Sólberg331d ago
I have this exact problem! Ended up putting the code in src but in the package root I have index.ts that exports everything I want to make available. Super simple tsconfig. I'm sure there's another way but I gave up.
G
goofygoober295d ago
@itsravenous any chance you've found a fix for this? I also have the same issue 😦
I
itsravenous295d ago
Nope, sorry - I just ended up adding an @ts-expect-error comment and forgetting about it!
G
goofygoober295d ago
All g, thanks for the reply. Any chance this was an open source project you were working on that you could share the repo to?
I
itsravenous294d ago
Sorry, it's a client project
G
goofygoober294d ago
All g, thanks anyways!
I
itsravenous294d ago
👍 Essentially the code snippet above should be enough, and the add @ts-expect-error comments to squish tRPC/Typescript's complaints.
More Posts
Response promise resolves before endpoint finished processingI want to interact with OpenAI's API in my Next.js + tRPC app. It seems that the my frontend is not tRPC onErrorI am using tRPC with Fastify and would like to be able to report issues when we get an error. httpsCode structure for a large monorepo using nx + tRPCWe have a large monorepo with a single tRPC API that will be used by several web clients and other cDoes tRPC work with Clerk and Vercel Edge functions?So the answer is yes, at least locally, but I when I deploy to Vercel I get nothing. Trying to work TRPCClientError when creating a db entry without `updatedAt` value?Guys, this is my prisma schema: ``` model User { id Int @id @default(autoincrement()) Type error: The inferred type of 'trpc' cannot be named without a reference....```./src/lib/api.ts:21:14 @driveorg/dashboard:build: Type error: The inferred type of 'trpc' cannot Decision on authI am using create-t3-app for my app , with next-auth (twitter, discord, google) . Now i am using samWhy does this starter with Prisma have it's own postinstall script?Prisma has it's own postinstall hook/script: <https://www.prisma.io/docs/concepts/components/prisma-Senior Full Stack Developer is Ready.✍️ Skill Set HTML/CSS/JS, TS React/Next.js, Angular/RxJs, Tailwind CSS WordPHow to pass context to vanilla client?Hi, I have a next app where I use trpc. Now I need to call some trpc functions from outside of any Is this blog correct? Trpc and next.js 13.4, App directoryI working on integrating with TRPC with the App directory and was given a solution but i'm not sure Is there a way to transform data server-side only?I'd like to implement something like Symfonys ParamConverter that converts certain params, but serveHow do I prefetch the nextPage of an infiniteQuery?I have a custom infiniteQuery hook, and I want to prefetch the next page on success. My current implis it possible to use trpc on next js api routeslike can i use trpc mutation or query on `/api/test`Dockerfile in TubrorepoHi I have a Turborepo where I have a nextjs frontend “web” and an express backend “api” both connectQuerying external api in trpc router not workingHi guys! So I'm trying to query an api endpoint that I created through a separate node server inside[HOW TO?] Call trpc endpoints from vanilla nextJs api routesSpinoff from an og thread here: https://discordapp.com/channels/867764511159091230/10323011989901353Tutorial for setting up tRPC with Next13 app dir?Anyone has a goos tutorial (blogpost / YouTube) on setting up tRPC with Next13 app dir for both clie