is tRPC setup wrong in create @tanstack/start@latest?

When running the cli tool and selecting to use tRPC the following route gives this error

localhost:3000/demo/trpc-todo:

useTRPC() can only be used inside of a <TRPCProvider>

useTRPC() can only be used inside of a <TRPCProvider>

I got it to work by adding the provider from the integrations

import { Provider } from "@/integrations/tanstack-query/root-provider";
[...]
function RootDocument({ children }: { children: React.ReactNode }) {
  const { queryClient } = Route.useRouteContext();
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Provider queryClient={queryClient}>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: "bottom-right",
          }}
          plugins={[
            {
              name: "Tanstack Router",
              render: <TanStackRouterDevtoolsPanel />,
            },
            TanStackQueryDevtools,
          ]}
        />
        </Provider>
        <Scripts />
      </body>
    </html>
  );
}

import { Provider } from "@/integrations/tanstack-query/root-provider";
[...]
function RootDocument({ children }: { children: React.ReactNode }) {
  const { queryClient } = Route.useRouteContext();
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Provider queryClient={queryClient}>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: "bottom-right",
          }}
          plugins={[
            {
              name: "Tanstack Router",
              render: <TanStackRouterDevtoolsPanel />,
            },
            TanStackQueryDevtools,
          ]}
        />
        </Provider>
        <Scripts />
      </body>
    </html>
  );
}

Is this the intended way to use it or theres something I'm missing?

TanStack•3mo ago•

4 replies

near-sapphire

is tRPC setup wrong in create @tanstack/start@latest?

When running the cli tool and selecting to use tRPC the following route gives this error

localhost:3000/demo/trpc-todo:

useTRPC() can only be used inside of a <TRPCProvider>

useTRPC() can only be used inside of a <TRPCProvider>

I got it to work by adding the provider from the integrations

import { Provider } from "@/integrations/tanstack-query/root-provider";
[...]
function RootDocument({ children }: { children: React.ReactNode }) {
  const { queryClient } = Route.useRouteContext();
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Provider queryClient={queryClient}>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: "bottom-right",
          }}
          plugins={[
            {
              name: "Tanstack Router",
              render: <TanStackRouterDevtoolsPanel />,
            },
            TanStackQueryDevtools,
          ]}
        />
        </Provider>
        <Scripts />
      </body>
    </html>
  );
}

import { Provider } from "@/integrations/tanstack-query/root-provider";
[...]
function RootDocument({ children }: { children: React.ReactNode }) {
  const { queryClient } = Route.useRouteContext();
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Provider queryClient={queryClient}>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: "bottom-right",
          }}
          plugins={[
            {
              name: "Tanstack Router",
              render: <TanStackRouterDevtoolsPanel />,
            },
            TanStackQueryDevtools,
          ]}
        />
        </Provider>
        <Scripts />
      </body>
    </html>
  );
}

Is this the intended way to use it or theres something I'm missing?

is tRPC setup wrong in create @tanstack/start@latest?

Similar Threads

is tRPC setup wrong in create @tanstack/start@latest?

Similar Threads

Similar Threads

Similar Threads