tRPC error Unhandled Runtime Error

Hi, I added tRPC to my nextjs react app and I'm trying to use

useQuery()

useQuery()

useQuery()

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;

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

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;

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

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

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

__doei__•8/7/24, 11:03 AM

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.

___doei__Very quick look here but at first glance you might need to swap the trpc provide...

filyysOP•8/7/24, 1:26 PM

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

filyysOP•8/8/24, 3:51 PM

Bump

tRPC error Unhandled Runtime Error

Similar Threads

Similar Threads

Similar Threads