Next.js 是一个流行的 React 应用程序框架，帮助开发人员快速搭建应用程序。Apollo 是一个强大的 GraphQL 客户端，可以帮助开发人员在应用程序中使用 GraphQL，同时提供了快速开发的能力。nextjs-apollo 是一个 npm 包，可以帮助开发人员在 Next.js 应用程序中集成 Apollo GraphQL 客户端。
安装
可以通过 npm 来安装 nextjs-apollo 包：
npm install nextjs-apollo apollo-client apollo-cache-inmemory apollo-link-http graphql isomorphic-unfetch
这个命令会自动安装 nextjs-apollo 所需的依赖包。
用法
使用 nextjs-apollo 前，需要先创建一个 Apollo 客户端实例。可以在 /lib/apollo.js 文件中进行创建：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ ----- ---- ---------------------
--- ------------ - -----
-- -- ------ -----
-------- -------------------------------- ---- -
----- -------- - --- ----------
---- -------------------------------- -- ------- -----
------------ --------------
------
---
------ --- --------------
------------------ ----------------
-------- -----------------
----- ---------
------ --- --------------------------------------
---
-
-- -- ------ -----
------ ------- -------- ------------------------ ---- -
-- ------------------ -
------ -------------------------------- -----
-
-- --------------- -
------------ - -------------------------------- -----
-
------ -------------
-在这里我们使用了 apollo-client、apollo-cache-inmemory、apollo-link-http、graphql 和 isomorphic-unfetch 这些包来初始化 Apollo 客户端。
然后，在每个页面中都需要创建一个 getInitialProps 方法，并将 Apollo 客户端实例赋值给 ctx 对象。例如，在 /pages/index.js 文件中：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------ - -------- - ---- ----------------------
------ --- ---- --------------
------ ---------- ---- ----------------
----- ----- - ----
-
-----
-
--
-------- ------- ---- -- -
-- -- -------- --- ------- -------
----- - -------- ------ ----- --- - - ----------------
-- ------- ------ ----------------
------ -
-----
--------------------
------
--
-
--------------------- - ----- -- --- -- -- -
----- ------ - -------------- - --- ---
----- - ---- - - ----- --------------
------ ------
---
------ - ---- --
--
------ ------- -------- ----- ---- -- -
------ -
--------------- ---------------------- -----
------ ----------- --
-----------------
--
-在 /pages/index.js 文件中，我们首先导入了一些从 @apollo/react-hooks 中导出的函数，它们可以帮助我们使用 Apollo 客户端请求 GraphQL 数据。我们还导入了一个名为 hello 的查询，它将从服务器返回 Hello World 字符串。
然后我们定义了一个函数组件 Index，使用了 useQuery 方法来请求服务器上的数据。useQuery 方法返回一个响应（包含 loading、error 和 data 属性）。
最后，在 Index.getInitialProps 中，我们使用 initApollo 方法创建一个 Apollo 客户端，并使用 client.query 方法从服务器中获取数据。
另外，我们在 App 组件中使用 ApolloProvider 为整个应用程序提供 Apollo 客户端。
示例代码
这里提供一个示例项目的源代码，可以在这个项目中学习如何在 Next.js 应用程序中使用 Apollo 客户端：
git clone https://github.com/ye-will/nextjs-apollo-example.git
结论
nextjs-apollo 是一个流行的 npm 包，可以帮助开发人员在 Next.js 应用程序中快速集成 Apollo GraphQL 客户端。本文提供了 nextjs-apollo 的使用教程，并在示例代码中进行了演示。如果你有兴趣使用 GraphQL 来构建应用程序，那么在使用 Next.js 时，可以考虑使用这个 npm 包来帮助你加快开发速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79301