在 Web 开发中，GraphQL 常常被用于数据的查询和管理。Next.js 是 React 应用程序的服务器渲染框架，而 Express 则常常被用于构建 Web 应用程序和 API。而 Apollo 则是一个流行的 GraphQL 库。下面将为大家介绍如何使用 Next.js + Express + Apollo 服务器来构建具有 GraphQL 功能的 Web 应用程序。
安装依赖
首先，我们需要安装一些必要的依赖。通过以下命令进行：
yarn add next express apollo-server-express graphql
创建一个简单的 Next.js 应用程序
现在，我们将创建一个简单的 Next.js 应用程序。首先，创建一个名为 "hello-world" 的文件夹，并在其中创建一个名为 "pages" 的文件夹。在 "pages" 文件夹中创建一个名为 "index.js" 的新文件。在 "index.js" 文件中，我们将编写一个简单的 React 组件，它将在页面上显示一条问候语。
import React from "react"; const IndexPage = () => <div>Hello World!</div>; export default IndexPage;
现在，我们需要在根目录中创建一个名为 "server.js" 的文件。在这个文件中，我们将创建一个 Express 服务器和一个 Apollo 服务器。
创建 Express 和 Apollo 服务器
首先，我们需要使用 Express 创建一个 Web 服务器。通过以下代码进行：
const express = require("express");
const server = express();现在，我们需要创建一个 Apollo 服务器。通过以下代码进行：
-- -------------------- ---- -------
----- - ------------ - - ---------------------------------
----- - -------------------- - - -------------------------
----- -------- - -
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ --- ----- -------- -- ------ --------
--
--
----- ------ - ---------------------- --------- --------- ---
----- ------------ - --- -------------- ------ ---在这个例子中，我们创建了一个简单的 GraphQL schema。它有一个 "Query" 类型，其中定义了一个 "hello" 字段返回 "Hello World" 字符串。请注意，schema 构建器是通过使用 graphql-tools 库中的 makeExecutableSchema 函数来创建的。
现在，我们的 Apollo 服务器已经准备好和我们的 Express 服务器一起工作了。通过以下代码来将 Apollo 服务器和 Express 服务器集成起来：
apolloServer.applyMiddleware({ app: server });最后，让我们在服务启动之前定义一个端口并将 Express 服务器监听在这个端口上：
const PORT = 3000;
server.listen(PORT, () =>
console.log(`🚀 Server ready at http://localhost:${PORT}`)
);现在，我们可以通过运行 "yarn dev" 命令来启动我们的 Next.js 应用程序，并且在浏览器中访问 "http://localhost:3000"。我们可以看到一个简单的 "Hello World" 问候语。
执行 GraphQL 查询
现在我们已经成功地创建了一个 GraphQL 服务器，让我们尝试一下在 Next.js 应用程序中执行一个 GraphQL 查询。我们可以使用 "fetch" 函数来执行这个查询。通过以下代码进行：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- --------- - -- -- -
----- ---------- ------------ - -----------------------
------------ -- -
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ -- ----- -- ---
--
----------- -- -----------
----------- -- ----------------------------
------------ -- --------------------
-- ----
------ ----------------------
--
------ ------- ----------在这个例子中，我们使用 "fetch" 函数从 "/graphql" 地址执行了一个简单的 GraphQL 查询。该查询请求了一个 "hello" 字段，并将其结果渲染在页面上。
结论
现在，我们已经成功地创建了一个 Web 应用程序，它集成了 Next.js、Express 和 Apollo 服务器。我们利用 Apollo 服务器提供的 GraphQL 功能来执行了一个查询，从而获得了一个简单的问候语。这个例子非常简单，但它可以帮助你理解如何构建具有 GraphQL 功能的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67451a65c1a23897ea88202c