GraphQL - 示例 GraphQL - 应用程序组件 GraphQL - 类型系统 在本章中,我们将创建一个简单的API,它返回一个问候消息HelloWorld,并使用GraphiQL访问它。 例 此示例基于NodeJS,Express和Apollo服务器。我们将学习将所有概念与以下步骤结合起来 第1步 - 设置Express ExpressJS是一个Web应用程序框架,可帮助构建网站和Web应用程序。在此示例中,我们将在Express框架之上构建GraphQL API。 下一步是创建一个文件夹hello-world-server并从终端导航到同一文件夹。添加package.json,并为包命名。由于此包仅在内部使用,因此我们可以将其声明为私有。 { "name":"hello-world-server", "private":true } 安装Express服务器的依赖项,如下所示 C:\Users\Admin\hello-world-server>npm install express body-parser cors body-parser是一个中间件包,可以帮助Express有效地处理HTTP Post请求。cors是另一个处理跨源资源共享的中间件包。 在项目文件夹中创建server.js文件并在其中键入以下内容 const bodyParser = require('body-parser') const cors = require('cors') const express = require('express') const port = process.env.PORT|| 9000 const app = express() //register middleware app.use(bodyParser.json() , cors()) app.listen(port, () => console.log(`server is up and running at ${port}`) 要验证Express服务器是否已启动并运行,请在终端窗口中执行以下代码 - C:\Users\Admin\hello-world-server>node server.js 服务器控制台中显示以下输出。这表明快速服务器正在端口9000上运行。 server is up and running at 9000 如果您打开浏览器并键入 http://localhost:9000,您将看到以下屏幕 要停止服务器,然后按 Ctrl + C 键。 第2步 - 安装GraphQL和Apollo Server 现在已配置Express,下一步是下载以下GraphQL依赖项 graphql graphql工具 Apollo服务器v1.0 我们将使用Apollo服务器v1.0,因为它是一个稳定版本。键入以下命令以安装这些依赖项 C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1 我们可以通过检查 先前创建的package.json文件来验证是否已成功安装这些依赖项 { "name": "hello-world-server", "private": true, "dependencies": { "apollo-server-express": "^1.4.0", "body-parser": "^1.18.3", "cors": "^2.8.4", "express": "^4.16.3", "graphql": "^0.13.2", "graphql-tools": "^3.1.1" } } 第3步 - 定义架构 GraphQL架构定义可以从服务中获取哪种对象,以及它具有哪些字段。可以使用GraphQL模式定义语言定义模式。现在,在server.js文件中添加以下代码片段 // Adding Type Definitions const typeDefinition = ` type Query { greeting: String } 这里,查询包含一个返回字符串值的greeting属性。 第4步 - 创建一个解析器 创建解析器的第一步是添加一些代码来处理问候语字段的请求。这是在解析器中指定的。解析程序函数的结构必须与架构匹配。在server.js 文件中添加以下代码段。 // Adding resolver const resolverObject = { Query : { greeting: () => 'Hello GraphQL From TutorialsPoint !!' } } 第二步是使用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功能可以注册航线的 http://localhost:9000/graphql。ReactJS应用程序可以使用此端点来查询数据。同样,graphqliExpress函数有助于注册路由 http://localhost:9000/graphiql。这将由GraphiQL浏览器客户端用于测试API。 完整的server.js代码如下 const bodyParser = require('body-parser') const cors = require('cors') const express = require('express') const port = process.env.PORT||9000 const app = express() app.use(bodyParser.json() , cors()) const typeDefinition = ` type Query { greeting: String }` const resolverObject = { Query : { greeting: () => 'Hello GraphQL From TutorialsPoint !!' } } 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 up and running ${port}`)) 第6步 - 启动应用程序 使用Node.js 执行server.js,如下所示 C:\Users\Admin\hello-world-server>node server.js 第7步 - 测试GraphQL API 打开浏览器并键入http://localhost:9000/graphiql。在GraphiQL的查询选项卡中,输入以下内容 { greeting } 服务器的响应如下 { "data": { "greeting": "Hello GraphQL From TutorialsPoint !!" } } 下图说明了响应 GraphQL - 应用程序组件 GraphQL - 类型系统