GraphQL 是一种强大的数据查询语言，目前在前端领域广受欢迎。它的主要优点是可以在一个请求中获取多个数据源的数据。本文将介绍如何在 Next.js 应用中使用 GraphQL。
安装依赖
首先需要安装一些必要的依赖：
--- ------- ------- ----------- --------------
其中，graphql 是 GraphQL 的核心库，graphql-tag 是一个用于处理 GraphQL 查询字符串的库，而 @apollo/client 是用于在客户端使用 GraphQL 的库。
创建客户端
在 Next.js 应用中使用 GraphQL，需要创建一个客户端用于查询 GraphQL。
------ - ------------- ------------- - ---- ---------------- ----- ------ - --- -------------- ---- ---------------------------------- ------ --- --------------- -- ------ ------- ------
在这个例子中，我们创建了一个客户端，它的 URI 是 https://api.example.com/graphql，我们的 GraphQL API 部署在服务器上。cache 是用于缓存查询结果的对象。它将在我们的 Apollo 客户端中存储我们所有的查询结果，并在需要时快速检索它们。
创建查询
我们通过 GraphQL 查询获取数据。下面是一个查询的例子：
----- -------- -
----- -
--
----
---------
-
-这个查询将返回 todos 数组，包含每个 todo 的 id，text 和 completed 属性。
在页面中使用查询
接下来，我们将使用 @apollo/client 库来在页面中查询我们的数据。首先，我们将导入 useQuery 功能：
------ - -------- - ---- ----------------
然后，我们可以使用 useQuery 函数来进行查询：
----- - -------- ------ ---- - - -------------------
其中，GET_TODOS 是我们之前创建的查询：
------ - --- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
--
----
---------
-
-
--如果数据正在加载，loading 变量将设为 true，如果发生错误，error 变量将被设置为该错误对象，如果查询成功，则 data 变量将包含返回的数据。
这里是一个简单的示例：
------ - -------- - ---- ----------------
------ - --- - ---- ----------------
----- --------- - ----
----- -------- -
----- -
--
----
---------
-
-
-
-------- ------- -
----- - -------- ------ ---- - - -------------------
-- --------- ------ ------------
-- ------- ------ ------- -----------------
------ -
----
-------------------- -- -
--- --------------
-----------
-----
---
-----
-
-
------ ------- -----结论
在 Next.js 应用中使用 GraphQL 可以让我们更快地获取数据。使用 @apollo/client 库，我们可以轻松地创建一个客户端和查询数据。这种方法还允许我们在应用程序的不同部分中共享相同的查询，从而减少了代码的复制和粘贴。
在实际项目中，我们可以根据实际需求对 GraphQL 进行更多的定制。这样我们就可以获得更多的控制，从而更好地满足我们的项目要求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66efa48e6fbf960197304fa4