Theo's Typesafe Cult•6mo ago

Trouble setting tRPC with NextJs App Router

I'm setting up a new with NextJs 13 and using App Router, following this video, https://www.youtube.com/watch?v=qCLV0Iaq9zU&t=968s But when I'm trying to use useQuery in my application, I have this errror

 error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)

 error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)

But useMutation works perfectly fine. This is my Client usage:

export default function Home() {
  const [input, setInput] = useState('');
  const createBacklogMutation = trpc.createBacklog.useMutation();
  const getBacklogsQuery = trpc.getBacklogs.useQuery({ userId: 1 });

  const backlogs = getBacklogsQuery.data;

  console.log(backlogs);

  const onClick = () => {
    createBacklogMutation.mutate({ url: input, userId: 1 });
  };

  return (
    <div>
      <input type='text' className='border' value={input} onChange={(e) => setInput(e.target.value)}/>
      <button className='border' onClick={onClick}>Click me</button>
    </div>
  );
}

export default function Home() {
  const [input, setInput] = useState('');
  const createBacklogMutation = trpc.createBacklog.useMutation();
  const getBacklogsQuery = trpc.getBacklogs.useQuery({ userId: 1 });

  const backlogs = getBacklogsQuery.data;

  console.log(backlogs);

  const onClick = () => {
    createBacklogMutation.mutate({ url: input, userId: 1 });
  };

  return (
    <div>
      <input type='text' className='border' value={input} onChange={(e) => setInput(e.target.value)}/>
      <button className='border' onClick={onClick}>Click me</button>
    </div>
  );
}

And this is my Provider:

'use client';

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

export function Provider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [httpBatchLink({ url: `${getBaseUrl()}/api/trpc` })],
    }),
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{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 './client';
import { getBaseUrl } from '../utils';

export function Provider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [httpBatchLink({ url: `${getBaseUrl()}/api/trpc` })],
    }),
  );

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

Can someone please help me with this?

Jack Herrington

YouTube

tRPC + NextJS App Router = Simple Typesafe APIs

👉 Upcoming NextJS course: https://pronextjs.dev 👉 Code : https://github.com/jherr/trpc-on-the-app-router 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 👉 VS Code theme and font? Night Wolf [black] and Operator Mono 👉 Terminal Theme and font? oh-my-posh...

1 Reply

Hizen•6mo ago

I figured it out after 2 hours lol, when we setup the route handler we need to return the fetchRequestHandler directly, not wrap it arond the curly bracket. The correct implementation is this:

const handler = ( req: NextRequest ) =>
    fetchRequestHandler( {
        endpoint: '/api/trpc',
        req,
        router: appRouter,
        createContext: () => ( {} )
    } );

const handler = ( req: NextRequest ) =>
    fetchRequestHandler( {
        endpoint: '/api/trpc',
        req,
        router: appRouter,
        createContext: () => ( {} )
    } );

Gaming

Programming

Trouble setting tRPC with NextJs App Router