Невозможно настроить Next.js 14 с помощью клиента Apollo GraphQL
Я новичок в Next.js и GraphQL, мне нужно работать над проектом, используя оба. Итак, пытаемся настроить фиктивный проект с помощью Next.js(JavaScript, React), клиента Apollo, сервера Apollo. Серверная часть запущена и работает без проблем. Но клиентская сторона не может загружать данные Apollo Server в пользовательский интерфейс. Мне удалось создать базовый вызов API со стороны клиента и загрузить данные, но не удалось выполнить их рендеринг с помощью ApolloProvider/ApolloWrapper.
Я пытался следовать многим статьям, доступным в Интернете, но ни одна из них не сработала. Последний вариант, который выглядел многообещающе и просто, но написан для TypeScript — Medium Article и Repo. Я пытался следовать этому, но все равно получаю ошибку ниже:
src/app/layout.js
import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloProvider } from "@apollo/client";
// import { ApolloWrapper } from "../lib/apollo-wrapper";
import client from "../lib/client";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang = "en">
<body className = {inter.className}>
<ApolloProvider client = {client}>{children}</ApolloProvider>
</body>
</html>
);
}
src/lib/client.js
import { ApolloClient, HttpLink, InMemoryCache, from } from "@apollo/client";
const httpLink = new HttpLink({
uri: '/'
})
const client = new ApolloClient({
cache: new InMemoryCache(),
uri: "http://localhost:4000/",
link: from([httpLink])
});
export default client;
Dependencies from package.json
"dependencies": {
"@apollo/client": "^3.9.0-rc.1",
"@apollo/experimental-nextjs-app-support": "^0.8.0",
"graphql": "^16.8.1",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"tailwindcss": "^3.3.0"
}
Ответы 1
Если вы хотите использовать клиент Apollo с App Router, вам необходимо использовать его с библиотекой @apollo/experimental-nextjs-app-support. См. этот пост — NextJS (AppRouter), Apollo (Клиент), ошибка при использовании ApolloProvider в корневом макете
Похоже, вы добавили @apollo/experimental-nextjs-app-support в свои зависимости, но вообще не использовали его. Кроме того, возможно, вашу библиотеку @apollo/client необходимо обновить до последней версии — npm install @apollo/client@latest
Чтобы обернуть RootLayoutApolloProvider, попробуйте выполнить следующее (подробнее см. https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support):
Сначала создайте новый файл src/app/ApolloWrapper.jsx:
"use client";
import { ApolloLink, HttpLink } from "@apollo/client";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
NextSSRApolloClient,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
function makeClient() {
const httpLink = new HttpLink({
uri: "http://localhost:4000/api/graphql",
fetchOptions: { cache: "no-store" },
});
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: httpLink,
});
}
export function ApolloWrapper({ children }) {
return (
<ApolloNextAppProvider makeClient = {makeClient}>
{children}
</ApolloNextAppProvider>
);
}
Теперь вы можете обернуть RootLayout в этот компонент-обертку в файле src/app/layout.js:
import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloWrapper } from "./ApolloWrapper";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang = "en">
<body>
<ApolloWrapper>{children}</ApolloWrapper>
</body>
</html>
);
}