Theo's Typesafe Cult•3mo ago

tRPC error Unhandled Runtime Error

Hi, I added tRPC to my nextjs react app and I'm trying to use useQuery() and it's showing me an error that I don't really know how to fix. I was using these sites as examples: https://trpc.io/docs/client/react/setup https://github.com/trpc/trpc/issues/3297#issuecomment-1423905894 src/server/routers/_app.tsx

import { publicProcedure, router } from "@/server/trpc";
import { z } from "zod";

export const appRouter = router({
  sayHello: publicProcedure.query(() => {
    return "Hello world!";
  }),
});

export type AppRouter = typeof appRouter;

import { publicProcedure, router } from "@/server/trpc";
import { z } from "zod";

export const appRouter = router({
  sayHello: publicProcedure.query(() => {
    return "Hello world!";
  }),
});

export type AppRouter = typeof appRouter;

src/utils/trpc.ts

import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../server/routers/_app";

export const trpc = createTRPCReact<AppRouter>();

import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../server/routers/_app";

export const trpc = createTRPCReact<AppRouter>();

src/server/trpc.ts

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

src/app/layout.tsx

// ... other code

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <TrpcProvider>
      <html className="inter.className">
        <body>{children}</body>
      </html>
    </TrpcProvider>
  );
}

// ... other code

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <TrpcProvider>
      <html className="inter.className">
        <body>{children}</body>
      </html>
    </TrpcProvider>
  );
}

src/app/_components/TrpcProvider.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import React, { useState } from "react";
import { trpc } from "../../utils/trpc";

export const TrpcProvider: React.FC<{ children: React.ReactNode }> = (p) => {
  const [queryClient] = useState(() => new QueryClient({}));
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/api/trpc",
        }),
      ],
    }),
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {p.children}
      </QueryClientProvider>
    </trpc.Provider>
  );
};

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import React, { useState } from "react";
import { trpc } from "../../utils/trpc";

export const TrpcProvider: React.FC<{ children: React.ReactNode }> = (p) => {
  const [queryClient] = useState(() => new QueryClient({}));
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/api/trpc",
        }),
      ],
    }),
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {p.children}
      </QueryClientProvider>
    </trpc.Provider>
  );
};

2 Replies

__doei__•3mo ago

Very quick look here but at first glance you might need to swap the trpc provider and the queryclientprovider so that the queryclient is the parent and trpc provider is the child.

filyys•3mo ago

Sadly, that didn't fix it. Same error as before

return (
    <QueryClientProvider client={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        {p.children}
      </trpc.Provider>
    </QueryClientProvider>
  );

return (
    <QueryClientProvider client={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        {p.children}
      </trpc.Provider>
    </QueryClientProvider>
  );

Bump

Gaming

Programming

tRPC error Unhandled Runtime Error