Wrapper Component: Unable to retrieve application context.

Hello tRPC-Community, I have ran into a funny "issue" while gaining my first experiences with tRPC. If I want to use tRPC in a React Component the documentation states that the Component should be wrapped by some Helper-Component from react-query. Now I want to be as flexible as possible and only want to "declare" the Wrapper-Component once: QueryWrapper.tsx:
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { QueryClientProvider, QueryClient} from "@tanstack/react-query"
import { trpcReact } from '@/trpc';

export default function QueryWrapper({children}) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpcReact.createClient({
links: [
httpBatchLink({
url: 'http://localhost:4321/api/trpc',
// You can pass any HTTP headers you wish here
async headers() {
return {};
},
}),
],
transformer: undefined
}),
);
return (
<trpcReact.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</trpcReact.Provider>
);
}
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { QueryClientProvider, QueryClient} from "@tanstack/react-query"
import { trpcReact } from '@/trpc';

export default function QueryWrapper({children}) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpcReact.createClient({
links: [
httpBatchLink({
url: 'http://localhost:4321/api/trpc',
// You can pass any HTTP headers you wish here
async headers() {
return {};
},
}),
],
transformer: undefined
}),
);
return (
<trpcReact.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</trpcReact.Provider>
);
}
I always get the Error you see in the Picture. Now to the weird part, as soon as I "use" the wrapper differently it works:
...
return (
<trpcReact.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<TestComponent />
</QueryClientProvider>
</trpcReact.Provider>
);
...
return (
<trpcReact.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<TestComponent />
</QueryClientProvider>
</trpcReact.Provider>
);
Now that makes the wrapper completely unflexible. What basically is the issue. Does anybody know why? This makes using tRPC very uncomfortable and repetitive... Thank you in advance! ~Max
No description
HL
haardik | LearnWeb3202d ago
this seems like an astro issue not trpc
M
Mechse201d ago
Why do you think so? It is basically just react.
M
Mechse201d ago
Here is a link to a StackOverflow Post from someone who describes the same problem with a completely different framework... https://stackoverflow.com/questions/77187229/expo-trpc-unable-to-retrieve-application-context-did-you-forget-to-wrap-your
Stack Overflow
Expo + tRPC: Unable to retrieve application context. Did you forget...
I have pretty simple tRPC server: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router...
HL
haardik | LearnWeb3201d ago
youre right - i was able to reproduce this as well. not sure why that happens.
M
Mechse201d ago
I have 0 experience with open source contribution. Is it alright to open a GitHub Issue for this?
More Posts
handling errors server sideHow do you guys handle server side errors 500 request on productionit sound like handle upload/download file need build new http server or endpoint?I have scan all posts i can about solution for handle upload/download file with trpc.So there is no tRPC queries running on the serverEnvironment: - bun 1.0.2 - next 13.4.16 - trpc 10.37.1 I am creating an app with `next-intl` and `nName recommendations for my api endpoints that use swagger, trpc-panel, trpc-playground.What name do you recommend for each one, in addition to the rest api and the trpc api endpoints. LiIn the context should I put all my dependencies for my endpoint handlers?For example I have the end point 'getStuff` In this endpoint the handler call 3 party apis and map Basic Inference not WorkingI have been struggling to get basic type inferencing to work with trpc, react, and Drizzle ORM. ThitRPC Websockets with a standalone Bun Server?Hey folks! Experiementing with setting up a standalone tRPC Server using Bun. The HTTP part is greaInfinite session query when tab is in backgroundSo, when I am in development mode, doing some changes in my code and my application's tab is not in How to return a stream? like open ai apiI want that my api can have stream responses like open ai https://github.com/openai/openai-node#strewas wondering if anyone got a chance to use Ajv as input/output validator?I have been trying to use Ajv https://ajv.js.org/ with tRPC, but I wasn't able to get the types workstate change does not refetch the query and the app freezeshttps://github.com/trpc/trpc/discussions/4856 I am not sure if linking is allowed but I opened a diI have an api with trpc, how can I consume it from dart/flutter?https://flutter.dev/ https://dart.dev/ Thankstrpc subscription with react-queryTRPCClientError: Subscriptions should use wsLink having error when use subscription with react-querUnable to get mutation to trigger subscription because EventEmitter not being sharedHey folks, Been struggling with this for a few hours now hopelessly and trying random things - read