本文将介绍如何在 Next.js 应用中使用 GraphQL。具体而言，我们将探讨以下主题：
- 使用 Apollo Client 连接 GraphQL API
- 编写一些常见的 GraphQL 查询和变异
- 优化性能和可伸缩性的实践
连接 GraphQL API
首先，我们需要在 Next.js 应用中引入 Apollo Client 来连接我们的 GraphQL API。我们可以创建一个名为 apollo-client.js 的新文件，并使用以下代码初始化 Apollo Client：
import { ApolloClient, InMemoryCache } from '@apollo/client';
export const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache()
});我们在这里使用了 Apollo Client 的默认 InMemoryCache。如果您需要更复杂的缓存逻辑，请参考 Apollo Client 文档，或使用自定义缓存。
现在，我们可以在整个 Next.js 应用中使用 client 对象来连接我们的 GraphQL API 了。作为一个示例，让我们展示如何使用我们的客户端来获取所有用户的列表数据：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - --- - ---- -----------------
----- ----------- - ----
----- -
----- -
--
----
-
-
--
------ ----- ----------- - ----- -- -- -
----- - ---- - - ----- -------------- ------ ----------- ---
------ -----------
--这段代码中，我们使用了 gql 函数来定义我们的 GraphQL 查询。它的输出将是一个可以立即传递给 query 函数的 GraphQL AST 对象。
同时，我们将查询传递给客户端的 query 函数，并返回结果中的所有用户数据。此时，我们已经可以在 Next.js 应用中使用 GraphQL 查询了。
编写常见的查询和变化
现在，让我们来编写一些常见的 GraphQL 查询和变化。我们将创建查询和变化文件，并创建一个名为 queries.js 和一个名为 mutations.js 的目录。这是一个通用模式，可用于组织应用程序中的查询和突变。
查询
这是一个名为 user-query.js 的查询文件的示例：
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ ----- ---------- - ----
---------- ---- -
-------- ---- -
--
----
-----
---------
-
-
--在这个查询文件中，我们编写了一个查询，它需要一个 id 参数，并返回有关一个用户的所有信息。我们可以在其他组件中利用这个查询，例如：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - ---------- - ---- ------------
----- ----------- - -- ------ -- -- -
----- - -------- ------ ---- - - -------------------- -
---------- - --- ------ --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
-------------------------
--------- ---------------------
---------- -------------------------
------
--
--注意，我们使用了 useQuery 钩子来执行我们的查询，并将 id 参数作为变量传递。在组件中，我们可以使用 loading 和 error 这两个数据，处理在查询中获取数据的过程中遇到的状态。如果查询加载中，我们会渲染一个等待信息，如果遇到错误，则显示错误消息。
变化
现在，让我们介绍如何编写一个常见的 GraphQL 变化，例如，一个编辑用户信息的变化。我们将创建一个名为 user-mutation.js 的变化文件，并将其定义如下：
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ ----- -------------------- - ----
------------- ---- ------ -------- ------- -------- -
-------------- ---- ----- ------ ------ ------- -
--
----
-----
-
-
--在这个变化文件中，我们定义了一个名为 updateUser 的变化。它需要三个参数，分别是 id、name 和 email，并返回已更新用户的所有信息。我们可以在其他组件中利用这个变化，例如：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
------ - -------------------- - ---- --------------
----- -------- - -- ----------- -- -- -
----- ------ -------- - ----------------------
----- ------------ - -------- ----- -- - ----------------------------------
----- ------------ - ----- ------- -- -
-----------------------
----- - ---- - - ----- ------------
---------- - --- -------- ----- ---------- ------ ---------- --
---
-------------------------
--
------ -
----- ------------------------
------ ----------- ----------------- ----------------- -- --------- -------- ----- ------------------ --- --
------ ------------ ------------------ ----------------- -- --------- -------- ------ ------------------ --- --
------- ---------------------- - ------------ - ----------------
------ -- ----------- ----------
-------
--
--这个组件包含一个可以用于编辑用户信息的表单。我们使用了 useMutation 钩子来执行我们的变化，并将用户信息作为变量传递。在组件中，我们可以使用 loading 和 error 这两个状态数据，处理变化中存在的任何错误和等待时间。如果存在任何错误，我们将错误消息显示在页面上。
优化性能和可扩展性
在应用程序中使用 GraphQL 及其相关的工具，能够提高其性能和可扩展性。以下是一些技术实践，可为您的 Next.js 应用程序提供额外的性能优化：
分批加载
当您的应用程序需要加载大量数据时，GraphQL 分页将变得特别有用。这使得您可以处理单个查询中的超过 1000 条数据。使用 fetchMore 函数可轻松处理分页，如下所示：
-- -------------------- ---- -------
------ - ---- -------- - ---- -----------------
----- ---------------- - ----
------------- ------- -
------------ --- ------ ------- -
----- -
------
---- -
--
-
-
-------- -
-----------
---------
-
-
-
--
----- ----- - -- -- -
----- - ----- -------- --------- - - ---------------------------
-- --------- ------ ------------------
------ -
-----
---------------------------- -- -
----- ------------------ ---------------- --
---
-------------------------------- -- -
------- ----------- -- ----------- ---------- - ------ ----------------------------- - -------- -------------
--
------
--
--在这个组件中，我们使用了 hasNextPage 和 endCursor 变量分页查询。在页面的底部，我们添加了一个按钮，可以加载更多数据。当我们单击按钮时，我们使用 fetchMore 函数来执行查询。在这种情况下，我们需要传递一个 after 选项来处理分页。
缓存查询结果
Apollo Client 自带的缓存机制可为您的应用程序带来显著的性能提升。默认情况下，它会根据查询的输入参数和结果对查询结果进行缓存，并在将来的查询中使用缓存数据。您也可以使用自定义缓存逻辑来更细粒度地控制缓存。
以下是一个将数据推送到缓存的示例：
-- -------------------- ---- -------
------ - ---- ----------- - ---- -----------------
----- ----------------- - ----
---------------- -------- -
-------------- ------- -
--
-----
-
-
--
----- ----- - -- -- -
----- ------------ - ------------------------------ -
------------- - ----- - ------- - -- -
--------------
------- -
------------------- - --- -
----- ---------- - ---------------------
----- --------
--------- ----
-------- ------- -- ---- -
--
-----
-
-
---
------ ------------ ------------------
-
-
---
-
---
----- ------------ - ------- -- -
-----------------------
------------ ---------- - ------ ------------------------ - ---
------------------------ - ---
--
------ -
-----
----- ------------------------
------ ----------- ------------ --
------- ----------------- -------------
-------
------
--
--请注意，在变化的回调中，我们使用了 cache.modify 函数，它根据数据的属性对 Apollo 缓存进行了修改。此时，我们使用了内置的 writeFragment 方法将新的帖子添加到 existingPosts。
服务器端渲染
使用 Next.js 应用程序配合 GraphQL，还可以使用服务器端渲染 (SSR) 机制来提高性能。在 Next.js 应用程序中，您可以使用 getServerSideProps 函数从服务器呈现查询结果。这也意味着，您的应用程序将在加载时使用 Next.js Serverless Functions 进行查询。这将减少使用客户端进行查询的需要。
以下是一个基本的使用 getServerSideProps 的例子：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - --- - ---- -----------------
------ ------ ---- -----------------------
----- ----------- - ----
----- -
----- -
--
----
-
-
--
------ ------- -------- ------- ---- -- -
------ -
--------
--------------
----
---------------------- -- -
--- ------------------------------
---
-----
---------
--
-
------ ----- -------- --------------------------- -
----- - ---- - - ----- -------------- ------ ----------- ---
------ - ------ - ---- - --
-如此一来，我们的应用程序将从服务器呈现查询结果，而不是让客户端通过网络或其他方式查询数据。
结论
本文介绍了使用 Apollo Client 和 GraphQL 的最佳实践。我们从整体上介绍了如何配置客户端连接，编写查询和变异，以及在应用程序中实现性能和可扩展性的技术实践示例。我们希望这个指南对您有所帮助，可以使您的 Next.js 应用程序更高效、更可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d10bfa336082f254854a3