关于graphql:GraphQL-快速入门5GraphQL-示例

52次阅读

共计 3676 个字符,预计需要花费 10 分钟才能阅读完成。

【注】本文译自:
GraphQL – Quick Guide (tutorialspoint.com)

    在本章中,咱们将创立一个简略的 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
    以下输入显示在服务器控制台中。这表明 express 服务器正在端口 9000 上运行。
server is up and running at 9000
    如果您关上浏览器并输出 http://localhost:9000,您将看到以下屏幕:

    要进行服务器,请按 Ctrl + C。

第 2 步:装置 GraphQL 和 Apollo Server

    当初 Express 已配置,下一步是下载以下 GraphQL 依赖项:

  • graphql
  • graphql-tools
  • apollo-server-express@1
        咱们将应用 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()

//register middleware
app.use(bodyParser.json(), cors())
app.listen(port, () => console.log(`server is up and running at ${port}`))

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

// Adding resolver
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')

//create routes for graphql and graphiql
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

第 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 !!"}
}

    如下图所示:

留神:请确保应用 Apollo Server 1.0 版。

正文完
 0