The hook useQuery is not supported in React Server Components, but only in Client Components

Client SDKs
,
1

Been trying to get set up in a fresh Next.js install. I’m using the Next.js integration and followed the setup instructions on the Github page.

When I try to call useQuery I get this Next.js error:

The hook useQuery is not supported in React Server Components, but only in Client Components.

No idea what this means or how to fix it. Here are my .tsx files:

ApolloWrapper.tsx:

"use client";

import { HttpLink } from "@apollo/client";
import {
  ApolloNextAppProvider,
  ApolloClient,
  InMemoryCache,
} from "@apollo/client-integration-nextjs";

function makeClient() {
  const httpLink = new HttpLink({
    uri: "https://my-api.tld",
    headers: {
        Authorization: 'Bearer XXXXXXXX'
    },
  });

  return new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

layout.tsx

import { ApolloWrapper } from "./ApolloWrapper";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body>
        <ApolloWrapper>{children}</ApolloWrapper>
      </body>
    </html>
  );
}

page.tsx

import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client/react";

const GET_RECIPE_ENTRIES = gql`
    query GetRecipeEntries {
        recipeList: entries {
            id
            title
            uri
        }
    }
`;

export default function Home() {
    const { data } = useQuery(GET_RECIPE_ENTRIES);

    const renderRecipeList = () => {
        if(data) {
            return (
                <ul>
                    {data.recipeList.map( (recipe) => (
                        <li key={recipe.id}>
                            <a href={recipe.uri}>
                                <h3>{recipe.title}</h3>
                            </a>
                        </li>
                    )) }
                </ul>
            )
        }
    };

    return (
        <main>
            { renderRecipeList() }
        </main>
    );
}
2

This is a modern React feature that’s part of Next.js - they have Server Components and Client Components. As the error message says, hooks like useQuery can only be used in Client Components.

Please give their documentation a read here: Getting Started: Server and Client Components | Next.js

3

Just when I think I’ve got React figured out they go and change it. For anyone encountering this error in the future you need to add ‘use client' to the top of the component you’re using Apollo’s useQuery hook on:

page.tsx:

'use client';
// tell react to use Client Components

import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client/react";

const GET_RECIPE_ENTRIES = gql`
    query GetRecipeEntries {
        recipeList: entries {
            id
            title
            uri
        }
    }
`;

export default function Home() {
    const { data } = useQuery(GET_RECIPE_ENTRIES);

    const renderRecipeList = () => {
        if(data) {
            return (
                <ul>
                    {data.recipeList.map( (recipe) => (
                        <li key={recipe.id}>
                            <a href={recipe.uri}>
                                <h3>{recipe.title}</h3>
                            </a>
                        </li>
                    )) }
                </ul>
            )
        }
    };

    return (
        <main>
            { renderRecipeList() }
        </main>
    );
}