Mechse • 3y 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