GraphQL 是一种由Facebook开发的用于API的查询语言与运行时。它使得客户端能够准确地请求所需的数据，而不必获取整个数据集。
Next.js是一个React框架，用于开发生产就绪的应用程序，内置支持Server-side rendering(SSR)和静态网站生成功能，现已广泛应用于Web应用程序的开发。在本文中，我们将讲解如何在Next.js应用程序中使用GraphQL，方便我们按需获取所需数据。
步骤1：安装必要的依赖
我们将使用Apollo Client作为GraphQL客户端，它是一个功能强大的GraphQL客户端库和React组件，适用于任何GraphQL服务器。
在终端中运行以下命令来安装必要的依赖项：
npm install apollo-client apollo-cache-inmemory apollo-link-context apollo-link-http graphql react-apollo
这将安装我们需要的Apollo客户端和其他GraphQL相关库。
步骤2：创建GraphQL客户端
对于我们的Next.js应用程序，我们将创建一个新的GraphQL客户端，它将帮助我们与GraphQL服务器进行通信。
在“/lib”目录中，创建一个新文件“graphql.js”，然后将以下代码复制到该文件中：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - ------------- - ---- ------------------------ ------ - -------- - ---- ------------------- ----- ----------- - -------------------------------- ----- -------- - --- ---------- ---- ----------- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- --------- ----- --- ------ ------- -------
在这个文件中，我们首先导入需要的依赖项。我们然后定义了GraphQL服务器的URI并创建了一个HTTP连接。接下来，我们使用InMemoryCache来缓存我们的GraphQL数据，并使用ApolloClient将其组合在一起。最后，我们将客户端导出。
步骤3：将GraphQL提供程序注入到Next.js应用程序中
现在我们需要将GraphQL客户端注入到我们的Next.js应用程序中，以便我们可以在所有的页面中使用该客户端。为此，我们需要在“pages/_app.js”文件中实现一个应用程序。
在“/pages”目录中，创建一个新文件“_app.js”，然后将以下代码复制到该文件中：
-- -------------------- ---- -------
------ --- ---- -----------
------ - -------------- - ---- ---------------
------ ---------- ---- --------------------
----- ----- ------- --- -
-------- -
----- - ---------- ---------- ------ - - -----------
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
-
------ ------- ------------------在这个文件中，我们首先导入必要的依赖项，包括我们刚刚创建的GraphQL客户端。
我们然后创建了一个新的应用程序，它继承了Next.js的原始应用程序，并通过将客户端传递给ApolloProvider来将客户端注入到所有的页面中。最后，我们将应用程序导出，使用withApollo来引入graphql.js中定义的Apollo客户端。
步骤4：编写GraphQL查询
我们已经准备好了GraphQL客户端和Next.js应用程序，现在我们需要编写GraphQL查询来获取所需的数据。
例如，我们将假设我们的应用程序需要获取一个“users”列表，每个用户包含其姓名和电子邮件地址。在“/graphql”目录中，创建一个新文件“users.gql”，然后将以下查询复制到该文件中：
query {
users {
id
name
email
}
}在这个查询中，我们定义了一个名为“users”的查询操作，它获取“id”、“name”和“email”字段。我们将在下一步中使用此查询。
步骤5：获取GraphQL数据
现在我们已经准备好了GraphQL客户端、Next.js应用程序和GraphQL查询，我们可以通过在页面上使用GraphQL查询来获取所需的数据。
例如，在“/pages/index.js”文件中，我们可以使用以下代码来获取我们的“users”列表：
-- -------------------- ---- -------
------ --- ---- --------------
------ - ----- - ---- ---------------
----- --------- - ----
----- -
----- -
--
----
-----
-
-
--
----- ----- - -- -- -
------ ------------------
--- ----- -------- ----- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------- -- -
--- --------------
------------------
-------------------
-----
---
-----
--
--
--------
--
------ ------- ------在这个代码段中，我们首先导入了我们前面定义的GraphQL查询“GET_USERS”，然后使用React Apollo的<query>组件创建了一个新的查询。
在<query>组件中，我们通过调用我们的“GET_USERS”查询来启动请求。我们然后通过在回调函数中渲染返回的结果来处理加载、错误和成功的情况。在这里，我们通过map循环遍历了我们返回的用户列表，并将每个用户的姓名和电子邮件地址呈现在列表项中。
结论
恭喜你！你已经学会了如何在Next.js应用程序中使用GraphQL，用于按需获取所需数据。
本文介绍了如何创建GraphQL客户端、将其注入到Next.js应用程序中、编写和处理GraphQL查询，从而使您能够在应用程序中有效地使用GraphQL。这个过程涵盖了大量的指导意义，希望您可以从中受益，并在实践中获得更多的技术应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67750ef06d66e0f9aaf3534a