T
tRPC

Wrapper Component: Unable to retrieve application context.

Wrapper Component: Unable to retrieve application context.

MMechse10/2/2023
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
Hhaardik10/2/2023
this seems like an astro issue not trpc
MMechse10/3/2023
Why do you think so? It is basically just react. 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
Hhaardik10/3/2023
youre right - i was able to reproduce this as well. not sure why that happens.
MMechse10/3/2023
I have 0 experience with open source contribution. Is it alright to open a GitHub Issue for this?

Looking for more? Join the community!

T
tRPC

Wrapper Component: Unable to retrieve application context.

Join Server
Recommended 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 `nAutomatically setting input for requests via OpenAPIMy API allows users to authenticate via OpenAPI with an API key. The context either has `ctx.user` (Name 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-quer