GraphQL 第一个例子

17 Mar 2025 | 4 分钟阅读

让我们在 GraphQL 中创建一个简单的 Hello World 示例。在这里，我们将使用 Node.js、Express、Apollo 服务器和 GraphiQL。我们将一起使用这些概念来构建用于客户端和服务器通信的 GraphQL API。

注意

Node.js： 正如我们在上一章中解释的那样，Node.js 是一个开源、跨平台的服务器运行时环境，用于在 Web 浏览器之外执行 JavaScript 代码。

Express： Express 是 Node.js 的一个流行的 Web 应用程序框架。它与 Node.js 一起用于构建网站和 Web 应用程序。在本示例中，我们将使用 Node.js 设置 Express，并在 Express 框架之上构建 GraphQL API。

Apollo Server： Apollo Server 是一个开源的、符合规范的 GraphQL 服务器，可以很容易地与任何 GraphQL 客户端（例如 Apollo Client）一起使用。 Apollo Server 是构建生产就绪、自我记录的 GraphQL API 的首选服务器，它可以从任何来源检索数据。

GraphiQL： GraphiQL 是 GraphQL 的集成开发环境 (IDE)。它是制作 Gatsby 网站的最佳和完整的工具之一（Gatsby 网站是一种采用 Markdown 等静态数据源并使用 React JS 将其转换为动态站点的网站）。

当您的站点的开发服务器正在运行时，您可以在 Web 浏览器上访问 GraphiQL。通常在 https://:4000/graphql 访问

创建示例

首先，创建一个名为 "first-example" 的文件夹，并使用 node.js 命令提示符导航到该文件夹。

现在，在项目文件夹 "first-example" 中添加 package.json 文件，并为该包命名。我们将在内部使用此包，因此它将是私有类型。

{
   "name":"first-example",
   "private":true
}

步骤 1 - 安装 Express 及其依赖项

现在，将 express 与两个额外的依赖项（即 body-parser 和 cors）一起安装到当前目录中。

在此，body-parser 和 cors 是 Express 使用的中间件包。 Express 使用 body-parser 包来有效地处理 HTTP Post 请求，并使用 cors 包来处理跨域资源共享。

现在是创建服务器的时候了。创建一个名为 server.js 的文件，并在其中使用以下代码。

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 4000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is started and running at ${port}`)

现在，您可以检查并验证服务器是否已启动并在 https://:4000/ 运行，但这不是结束。您还必须安装 GraphQL 和 Apollo 服务器。您应该使用 Ctrl+C 停止服务器。

步骤 2 - 安装 GraphQL 和 Apollo 服务器

设置 Express 后，下一步是安装 GraphQL 和 Apollo 服务器及其所需的依赖项。

graphql
graphql-tools
apollo-server-express@1

在此，使用 Apollo server v1.0，因为它是一个稳定的版本。

使用以下命令安装所需的依赖项

如果要验证依赖项是否已成功安装，可以检查我们已在项目文件夹中创建的 package.json 文件。

{
   "name": "first-example",
   "private": true,
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.19.0",
      "cors": "^2.8.5",
      "express": "^4.17.1",
      "graphql": "^15.0.0",
      "graphql-tools": "^5.0.0"
   }
}

您可以看到依赖项已成功安装。

步骤 3 - 定义架构

GraphQL 架构用于定义可以从服务中获取的对象类型以及它们包含的字段。 GraphQL 架构定义语言用于定义 GraphQL 架构。

在 server.js 文件中添加以下代码以定义架构

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      hello: String
   }

在这里，hello 是查询的属性，它返回一个字符串值。

步骤 4 - 创建解析器

解析器用于处理对查询的 hello 属性的请求。解析器函数和架构函数的结构必须相同。在 server.js 文件中添加以下代码。

// Adding resolver
const  resolverObject = {
   Query : {
      hello: () => 'Hello World! Welcome to JavaTpoint...'
   }
}

使用预定义的函数 makeExecutableSchema() 来绑定架构和解析器。该函数在 graphql-tools 模块中预定义。

在 server.js 文件中添加以下代码以绑定架构和解析器。

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

步骤 5 - 定义从 ReactJS/GraphiQL 应用程序检索数据的路由

在 server.js 文件中添加以下代码以定义检索数据的路由。

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')
   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

在此，graphqlExpress 函数用于注册路由 https://:4000/graphql，graphqliExpress 函数用于注册路由 https://:4000/graphiql。

现在，完整的 server.js 文件将如下所示

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||4000
const app = express()
app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   hello: String
}`
const  resolverObject = {
   Query : {
      hello: () => 'Hello World! Welcome to JavaTpoint...'
   }
}
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})
const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is started and running ${port}`))

步骤 6 - 启动服务器

使用以下命令执行服务器

步骤 7 - 打开浏览器测试 API

在 https://:4000/graphiql 打开浏览器并使用查询

{
   hello
}

您将看到输出

{
  "data": {
    "hello": "Hello World! Welcome to JavaTpoint..."
  }
}

输出

下一个主题GraphQL 应用程序组件

← 上一个下一个 →

GraphQL 第一个例子

创建示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

GraphQL 教程

Apollo 框架

面试题

GraphQL 第一个例子

创建示例

相关帖子

GraphQL 模式

优点 & 缺点

GraphQL 安装

GraphQL 解析器

GraphQL 类型系统

GraphQL 架构

GraphQL vs REST

GraphQL 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器