Mechse•10mo ago

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

5 Replies

haardik | LearnWeb3•10mo ago

this seems like an astro issue not trpc

Mechse•10mo ago

Why do you think so? It is basically just react.

Mechse•10mo 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...

haardik | LearnWeb3•10mo ago

youre right - i was able to reproduce this as well. not sure why that happens.

Mechse•10mo ago

I have 0 experience with open source contribution. Is it alright to open a GitHub Issue for this?