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

useQuery

useQuery

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)

 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

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

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

'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?

YouTubeJack Herrington

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...

Trouble setting tRPC with NextJs App Router

Similar Threads

Similar Threads

Similar Threads