初学者向けGraphQL~特点、引入和简单的查询

最近开始学习React，因此也尝试着使用由同一家Facebook开发的GraphQL。
在还不了解GraphQL的轮廓时，我曾经以为它是一种能用自己的搜索引擎解决所有NoSQL查询的魔法查询语言。（这种想法太幼稚了）

我刚开始学习GraphQL，这是我第二天写的文章，因此可能存在很多模糊和错误的地方…

GraphQL是一种查询语言。

实际上，Query和Response之间可以建立对应关系的结构，通过模式配置可以实现编辑器的补全和类型检查等功能，与REST API不同的是，不需要通过处理来区分GET端点，从而避免冗余，给我留下了类似于API框架的印象。

安装

本次我们将使用基于Node的express + apollo + GraphQL来搭建API服务器。

// プロジェクトフォルダを作成
$ mkdir first_graphql
$ cd first_graphql

// プロジェクトのセットアップ
$ npm init

// 必要なモジュールをインストール
$ npm i --save express apollo-server-express graphql

// index.jsを作成
$ touch index.js

写代码

index.js 的中文翻译可以为 “主要.js”。

const express = require('express')
const { ApolloServer, gql } = require('apollo-server-express')
const app = express()

// GraphQL言語のschemaを使ったconstruct定義
// レスポンスするデータの型を設定しておく
const typeDefs = gql`
    type Query {
        firstQuery: String
    }
`

// schemaごとに取得ロジックを設定していく 
const resolvers = {
    Query: {
        firstQuery: () => "Hello,world!",
    },
}

const server = new ApolloServer({ typeDefs, resolvers })

server.applyMiddleware({ app })

app.listen({ port: 4000 }, () =>
    console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)

试着动一下

$ nodemon index.js
//$ node index.jsでも可

我尝试执行查询

让我们在 index.js 文件的下面部分尝试执行设置好的查询。

// GrapohQL言語のschemaを使ったconstruct定義
// レスポンスするデータの型を設定しておく
const typeDefs = gql`
    type Query {
        firstQuery: String
    }
`
// schemaごとに取得ロジックを設定していく 
const resolvers = {
    Query: {
        firstQuery: () => "Hello,world!",
    },
}

让我们在GUI左侧的编辑器中按照以下方式写下并运行。

{
  firstQuery
}

如果在右侧的执行结果屏幕上显示此内容，表示成功提取数据。

{
  "data": {
    "firstQuery": "Hello,world!"
  }
}

最后

我稍微尝试学习后发现，GraphQL并不是什么魔法语言，而是需要自己定义类型并编写数据获取逻辑的。

然而，聚合GET端点只需要一个，能够实现来自前端的直观查询，并且像TypeScript一样简化代码管理等等… 这些都非常方便！

因为我刚开始学习，所以我希望今后能不断积累知识！

那么，现在开始！