GraphQL 是一种查询语言，用于 API。它使得客户端能够精确地请求所需的数据，而不是下载完整的文档。Next.js 是一个 React 框架，提供了一套用于服务端渲染和静态生成的工具。
在本文中，我们将介绍如何在 Next.js 中使用 GraphQL。
安装依赖
首先，我们需要安装必要的依赖。打开终端，进入项目根目录，并执行以下命令：
npm install isomorphic-unfetch graphql apollo-boost
其中，isomorphic-unfetch 用于在浏览器和服务端进行数据请求，graphql 用于定义查询语言，而 apollo-boost 则是一个轻量级的 GraphQL 客户端。
创建模块
接下来，我们需要定义一个用于处理 GraphQL 查询的模块。在项目的 components 目录中，创建一个名为 graphql.js 的新文件，并输入以下代码：
-- -------------------- ---- ------- ------ - ------------- --------- ------------- - ---- -------------- ----- ---- - --- ---------- ---- ---------------------------------- ------------ ------------- -- ----- ------ - --- -------------- ----- ------ --- --------------- -- ------ ------- ------
上述代码创建了一个 Apollo 客户端，用于连接 GraphQL 服务器。在这里，我们使用了一个开放的 GraphQL API（https://graphql-pokemon.now.sh/）作为例子。
编写页面
现在，我们可以在 Next.js 页面中使用这个 GraphQL 客户端了。
在页面组件中，我们需要编写三个函数，分别是 getInitialProps、query 和 render。以下是一个范例：
-- -------------------- ---- -------
------ ------ ---- -----------------------
----- ----- - -- ---- -- -- -
---------------------------------
-
--------------------- - ----- -- -- -
----- - ---- - - ----- --------------
------ ----
-
------------- ---------- -
----
------
-
-
-
--
------ - ---- -
-
------ ------- -----首先，我们导入了之前定义的 client。
然后，我们创建了一个页面组件 Index，该组件展示了一个 data 属性。在未来，这个属性会被我们的 GraphQL 查询结果替换掉。
接着，我们定义了一个 getInitialProps 函数，它返回一个包含 data 属性的对象。这里，我们向 GraphQL 服务器发送了一个查询，该查询请求名为「Pikachu」的宝可梦的名称和编号。当客户端加载页面时，getInitialProps 函数将自动被执行，并将查询结果作为 data 属性返回。
最后，我们将 Index 组件导出为默认模块。当客户端请求组件时，render 函数将被自动调用，并呈现查询结果。
运行应用
完成代码编写后，我们需要运行应用并查看结果。打开终端，进入项目根目录，并执行以下命令：
npm run dev
这个命令将启动一个开发服务器，并监听端口 3000。在浏览器中打开 http://localhost:3000，你应该能够看到一个 JSON 字符串，其中包含了查询的结果。
结论
在这篇文章中，我们介绍了如何在 Next.js 中使用 GraphQL 进行数据查询。我们学习了如何定义一个处理 GraphQL 查询的模块，并在页面组件中使用它。我们还演示了如何使用 getInitialProps 函数在服务器端进行查询，并将查询结果返回给客户端。通过这篇文章，你应该对使用 GraphQL 在 Next.js 中进行数据查询有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67627559856ee0c1d403770d