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
Hizenā€¢11mo 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: () => ( {} )
} );
Want results from more Discord servers?
Add your server