随着前端开发的发展，越来越多的应用需要实时获取数据。GraphQL 作为一种现代的 API 技术，已经成为了众多应用程序的首选。Next.js 提供了一个轻松集成 GraphQL 的方式，让你能够更快速、更高效地构建应用程序。
本文将介绍如何在 Next.js 中集成 GraphQL，重点将放在使用 Apollo GraphQL 客户端。我们将讨论以下内容：
- 什么是 GraphQL？
- 如何在 Next.js 中使用 Apollo GraphQL 客户端？
- 如何从 GraphQL 中获取数据？
- 如何在 Next.js 中动态传递参数？
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的查询语言，用于 API 的设计和查询。与 RESTful API 不同，GraphQL 并没有固定的端点和数据格式。这使得客户端能够根据自己的需要查询和获取数据。GraphQL 可以在前端和后端使用，是一个非常灵活和强大的技术。
如何在 Next.js 中使用 Apollo GraphQL 客户端？
使用 Apollo GraphQL 客户端可以轻松地在 Next.js 中使用 GraphQL。让我们开始吧！
步骤一：安装 Apollo 和相关依赖
1.使用以下命令安装最新版本的 NPM：
npm install npm@latest -g
2.使用以下命令安装 apollo-client 和 react-apollo：
npm install apollo-client react-apollo graphql-tag graphql -S
步骤二：在 pages/_app.js 中添加 ApolloProvider 组件
在 pages/_app.js 中添加 import 语句：
import { ApolloProvider } from 'react-apollo';
import { createClient } from '../lib/apolloClient';然后调用 createClient 函数，创建一个新的客户端实例：
const client = createClient();
在 _app.js 的 render 方法中，将 ApolloProvider 组件和客户端实例传递给 ApolloProvider 组件：
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
);步骤三：创建一个 GraphQL 查询
创建一个名为 GET_ALL_PRODUCTS 的 GraphQL 查询：
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- ---------------- - ----
----- -
-------- -
--
----
-----
-
-
--步骤四：在页面中使用查询
在你的页面中使用 graphql 高阶组件来包装你的组件：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
------ - ---------------- - ---- -----------------
----- ----------- - -- ----- - -------- ------ -------- - -- -- -
-- ------- ------ ------------- -------------- ------- ---------- ---
-- --------- ------ -------------------
------ -
----
----------------------- -- -
--- -----------------
---- ------------------- --
-----------------------
-----
---
-----
--
--
------ ------- ---------------------------------------上面代码中，我们使用 graphql() 高阶组件将查询 GET_ALL_PRODUCTS 与组件 ProductList 关联。查询结果将作为 data 属性传递给组件。如果查询过程中发生错误，则 ERROR_MESSAGE 组件将被渲染出来。如果正在加载数据，则用户将看到 “加载中” 字样。最后，在 map() 循环中渲染每个产品。
如何从 GraphQL 中获取数据？
在 GraphQL 中获取数据分为两步：
1.创建一个查询，定义所需的字段。
2.将查询提交到服务器并获取数据。
让我们根据上面的代码来看看如何实现这个过程。
创建一个查询
使用 gql 函数从字符串中创建查询：
-- -------------------- ---- -------
------ --- ---- --------------
----- ---------------- - ----
----- -
-------- -
--
----
-----
-
-
--上面代码中，我们定义了一个名为 GET_ALL_PRODUCTS 的查询，该查询将返回所有 products 的 id、name 和 image 字段。
提交查询并获取数据
我们将查询提交给 Apollo 客户端并获取数据，获取数据后将其传递给你的组件。这个过程在上面文章的复合组件中已经介绍过了，这里再介绍一下。
-- -------------------- ---- -------
------ - ------- - ---- ---------------
------ - ---------------- - ---- -----------------
----- ----------- - -- ----- - -------- ------ -------- - -- -- -
-- ------- ------ ------------- -------------- ------- ---------- ---
-- --------- ------ -------------------
------ -
----
----------------------- -- -
--- -----------------
---- ------------------- --
-----------------------
-----
---
-----
--
--
------ ------- ---------------------------------------在上面的代码中，我们使用 graphql 高阶组件将 GET_ALL_PRODUCTS 查询与组件 ProductList 关联。查询结果将作为 data 属性传递给组件。
如何在 Next.js 中动态传递参数？
在 Next.js 中，可以将参数动态传递给组件。这可以让我们根据用户请求的内容决定显示什么内容。
让我们来看一个例子。假设你有一个名为 GET_PRODUCT_BY_ID 的查询：
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- ----------------- - ----
----- ------------ ---- -
----------- ---- -
--
----
-----------
-
-
--上述代码中，我们定义了一个名为 GET_PRODUCT_BY_ID 的查询，并接受一个 ID 参数。
在渲染组件时，我们需要指定这个 ID。为了将这个 ID 传递到组件中，我们使用 Next.js 的路由器。从 URL 中提取 ID 并传递到组件中：
-- -------------------- ---- -------
------ - --------- - ---- --------------
----- ------------- - -- ----- - -------- ------ ------- - -- -- -
----- ------ - ------------
----- - -- - - -------------
-- ------- ------ ------------- -------------- ------- --------- ---
-- --------- ------ -------------------
------ -
-----
-----------------------
----------------------------
------
--
--
------ ------- -------------------------- -
-------- -- ------ -- -- -- ---------- - --- --------- - ---
------------------在这段代码中，我们使用 Next.js 的路由器将 ID 提取出来，并将其传递到 Apollo 客户端中。GraphQL 查询中的 $id 参数将从路由器中获取到的 ID 取值。
结论
上面，我们讨论了如何在 Next.js 中集成 GraphQL
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67480f9a5883fc5ebff30f80