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

QueryWrapper.tsx

QueryWrapper.tsx

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>
  );
}

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>
  );

  ...
  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

Bildschirmfoto_2023-10-02_um_18.46.57.png

Wrapper Component: Unable to retrieve application context.

Similar Threads

Similar Threads

Similar Threads