GraphQL 是一种用于 API 的查询语言，它可以让前端开发者更加灵活地请求数据。Next.js 是一个用于构建 React 应用程序的框架，它可以与 GraphQL 很好地集成。本文将介绍如何在 Next.js 中使用 GraphQL。
安装依赖
在开始之前，需要安装以下依赖：
apollo-client：用于在客户端使用 GraphQL。apollo-server-micro：用于在服务器端使用 GraphQL。graphql：GraphQL 的核心包。
可以使用以下命令进行安装：
npm install apollo-client apollo-server-micro graphql
在客户端使用 GraphQL
在 Next.js 中，可以使用 getStaticProps 或 getServerSideProps 方法从服务器获取数据。这里我们将使用 getStaticProps 方法。
首先，在页面组件中导入 apollo-client，并创建一个 Apollo 客户端：
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:3000/api/graphql',
cache: new InMemoryCache(),
});在上面的代码中，我们指定了 GraphQL API 的 URL，并创建了一个缓存对象。现在我们可以使用 client 对象来发送 GraphQL 查询了。
假设我们有一个 posts 查询，用于获取博客文章的列表。我们可以使用以下代码来发送查询：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- --------- - ----
----- -
----- -
--
-----
-------
-
-
--
------ ----- -------- ---------------- -
----- - ---- - - ----- --------------
------ ----------
---
------ -
------ -
------ -----------
--
--
-在上面的代码中，我们首先使用 gql 函数定义了一个查询。然后，我们在 getStaticProps 方法中使用 client.query 方法发送查询，并将结果作为 props 对象返回。
现在我们可以在页面组件中使用 props.posts 来渲染博客文章的列表了。
在服务器端使用 GraphQL
在 Next.js 中，可以使用 pages/api 目录中的文件来创建 API。我们将在这里创建一个 GraphQL API。
首先，在 pages/api 目录中创建一个 graphql.js 文件，然后导入 apollo-server-micro 和 graphql：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
------ - -------------------- - ---- ----------------
------ - -------- - ---- -----------
------ - --------- - ---- --------------
----- ------ - ----------------------
---------
----------
---
----- ------ - --- --------------
-------
---
------ ----- ------ - -
---- -
----------- ------
--
--
------ ------- ---------------------- ----- -------------- ---在上面的代码中，我们首先使用 makeExecutableSchema 函数创建一个 GraphQL schema。然后，我们创建了一个 Apollo 服务器，并将 schema 传递给它。最后，我们将服务器的处理程序导出，并将其绑定到 /api/graphql 路径上。
现在，我们需要定义 schema 和 resolvers。在 pages/api 目录中创建一个 schema.js 文件，然后定义一个 typeDefs 对象：
-- -------------------- ---- -------
------ ----- -------- - -
---- ---- -
--- ---
------ -------
-------- -------
-
---- ----- -
------ --------
-
--在上面的代码中，我们定义了一个 Post 类型，它包含 id、title 和 content 字段，以及一个 Query 类型，它包含一个 posts 查询。
接下来，在 pages/api 目录中创建一个 resolvers.js 文件，然后定义一个 resolvers 对象：
-- -------------------- ---- -------
----- ----- - -
-
--- ----
------ ------- --------
-------- ----- -- -- ----- -------
--
-
--- ----
------ --------- --------
-------- ----- -- -- ---- -------
--
--
------ ----- --------- - -
------ -
------ -- -- ------
--
--在上面的代码中，我们定义了一个 posts 数组，它包含两个博客文章。然后，我们定义了一个 Query 类型的解析器，它返回 posts 数组。
现在，我们可以启动 Next.js 应用程序，并尝试从客户端发送 GraphQL 查询，或从浏览器中打开 /api/graphql 路径来测试 API。
总结
在本文中，我们介绍了如何在 Next.js 中使用 GraphQL。我们首先在客户端使用 apollo-client 发送 GraphQL 查询，然后在服务器端使用 apollo-server-micro 创建了一个 GraphQL API。希望本文能够帮助你更好地使用 Next.js 和 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bdf157add4f0e0ff78ba94