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