Apollo graphql 可以与 Nextjs 一起使用而无需安装 react-router-dom 吗？答案

【问题标题】：Can Apollo graphql be used with Nextjs without having to install react-router-dom?Apollo graphql 可以与 Nextjs 一起使用而无需安装 react-router-dom 吗？
【发布时间】：2021-09-26 19:26:37
【问题描述】：

一个 ApolloProvider 包装一个应用程序：

<ApolloProvider client={client}>
    <App />
</ApolloProvider>

问题是，在 nextjs 中，您可以在 pages 文件夹中声明路由组件，而无需将它们添加到 App.js

这会导致错误“Invariant Violation: could not find "client" in the context or pass in an option.”

Apollo 可以在这些组件中使用原生 Nextjs 处理路由的方式吗？

【问题讨论】：

标签： reactjs next.js apollo apollo-client

【解决方案1】：

这就是我对我所做的，创建一个单独的文件夹，我称之为 apollo 文件夹，如下所示：

然后在该文件夹中创建一个您想要的文件名，然后为您的 apollo 客户端输入此代码或任何代码

apollo/apolloClient.js

 import ApolloClient from "apollo-client";
    import { InMemoryCache } from "apollo-cache-inmemory";
    import { createHttpLink } from "apollo-link-http";
    import { ApolloProvider } from "@apollo/react-hooks";
    import { setContext } from "apollo-link-context";
    
    const httpLink = createHttpLink({
      uri: "http://localhost:5000",
    });
    
    const authLink = setContext(() => {
      const token = localStorage.getItem("jwtToken");
      return {
        headers: {
          Authorization: token ? `Bearer ${token}` : "",
        },
      };
    });
    
    const client = new ApolloClient({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache(),
    });
    
    export default client;

您必须导出客户端或我对我所做的操作并转到_app.js：

import "../styles/globals.css";
import { ApolloProvider } from "@apollo/react-hooks";
import client from "../apollo/apolloClient";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
          <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

我们已经从刚刚创建的 apolloClient.js 文件中导入了客户端并导出了客户端

希望这就是你的意思。

【讨论】：

好吧，我很笨，我在 index.js 中有 ApolloProvider 包装了 App.js 我将 ApolloProvider 移动到 _app.js 就像在你的例子中一样，现在一切正常，非常感谢先生跨度>
没关系，你开始学习reactjs，也转成nextjs了？
是的，这是我在 Next 中的第一个项目，我真的很喜欢 :)
Goodluckk，我也在尝试将我的项目转换为 nextjs
Cool 加我不和谐兄弟 alexh#3397