harsh-harlequin

unable to setup RQ in next.js project

this is my code,

import { Navbar } from "@/components/Navbar";
import { Chart1 } from "@/components/Chart1";
import { Chart2 } from "@/components/Chart2";
import { useQuery } from "@tanstack/react-query";


export default function Home() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ["twitterData"],
    queryFn: async () => {
      const response = await fetch("/api/twitter");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
  });
  if (isPending) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }
  return (
    <div>
      <div className="text-center m-2 text-2xl font-bold font-mono md:p-6 md:m-6 ">
        <Navbar />
      </div>
      <div className="font-bold m-4 p-4 gap-3 grid grid-cols-1 md:grid-cols-2 text-2xl bg-black pt-8 mt-8">
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart1 />
        </div>
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart2 />
        </div>
        <div className="text-white">
          <h1>Twitter Search Results</h1>
          <ul>
            {data.map((todo: any) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

import { Navbar } from "@/components/Navbar";
import { Chart1 } from "@/components/Chart1";
import { Chart2 } from "@/components/Chart2";
import { useQuery } from "@tanstack/react-query";


export default function Home() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ["twitterData"],
    queryFn: async () => {
      const response = await fetch("/api/twitter");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
  });
  if (isPending) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }
  return (
    <div>
      <div className="text-center m-2 text-2xl font-bold font-mono md:p-6 md:m-6 ">
        <Navbar />
      </div>
      <div className="font-bold m-4 p-4 gap-3 grid grid-cols-1 md:grid-cols-2 text-2xl bg-black pt-8 mt-8">
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart1 />
        </div>
        <div className="flex items-center justify-center bg-white text-black rounded-lg p-4">
          <Chart2 />
        </div>
        <div className="text-white">
          <h1>Twitter Search Results</h1>
          <ul>
            {data.map((todo: any) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

and I am getting an error that

Unhandled Runtime Error
Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

Unhandled Runtime Error
Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

11 Replies

harsh-harlequinOP•13mo ago

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
      </body>
    </html>
  );
}

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
      </body>
    </html>
  );
}

adverse-sapphire•13mo ago

Follow this section for how you should setup RQ in a Next App Router project. https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

Advanced Server Rendering | TanStack Query React Docs

Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the Server Rendering & Hydration guide before this one as it teaches the basics for using React Query with SSR, and Performance & Request Waterfalls as well as Pre...

eastern-cyan•13mo ago

Follow this section

not really. you put the QueryClientProvider into the root layout, which is a server component. But it needs to go into its own client component (that can take server components as children). That's why we have a <Providers> component explicitly in the docs. also you are creating the QueryClient wrong - this is now how we do it in the docs

adverse-sapphire•13mo ago

Yeah, that's what the doc explains too

eastern-cyan•13mo ago

I don't understand. The code you're showing and the code example in the docs isn't the same so I think you're doing it wrong

adverse-sapphire•13mo ago

Im just trying to help him, code isn't mine, I referred him to that doc page on how the setup should look like

eastern-cyan•13mo ago

sorry, I misread 🙈

adverse-sapphire•13mo ago

I figured hahaha

harsh-harlequinOP•13mo ago

thanks, now it's working do I have to use the 'use client' directive every time I am fetching or if mutating data using RQ? thanks for helping me out

adverse-sapphire•13mo ago

useQuery & useMutation are hooks which means you need to use the 'use client' directives

harsh-harlequinOP•13mo ago

Okay, thanks for this info

Gaming

Programming

unable to setup RQ in next.js project

Did you find this page helpful?