Apollo graphql 可以在不安装 react-router-dom 的情况下与 Nextjs 一起使用吗？

Question

ApolloProvider 包装了一个应用程序：

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

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

这会导致错误“不变违规：无法在上下文中找到“客户端”或作为选项传入。“

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

Answer 1

这就是我对我所做的，创建一个单独的文件夹，我将它命名为 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 文件中导入了客户端并导出了客户端

希望这就是你的意思。

Apollo graphql 可以在不安装 react-router-dom 的情况下与 Nextjs 一起使用吗？

Can Apollo graphql be used with Nextjs without having to install react-router-dom?

reactjs

next.js

apollo

apollo-client