4 replies

tRPC error Unhandled Runtime Error

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

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;

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

TTC

Theo's Typesafe Cult•2y ago•

4 replies

filyys

tRPC error Unhandled Runtime Error

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

useQuery()

useQuery()

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

tRPC error Unhandled Runtime Error

tRPC error Unhandled Runtime Error

Similar Threads

Similar Threads

Similar Threads