【GraphQL】是当前备受关注的技术，指的是什么？【API】

2 年 ago

科, 雅

1 minute

首先

请问各位听说过GraphQL吗？我之前听过这个词，但直到我开始工作之前，完全没有听说过它具体是什么。

过去，当提到API时，主要是指REST API，但GraphQL具有REST API所没有的许多优点，因此这次我们打算一起总结一下。

REST API的意思是什么呢？

是以表示状态转移（Representational State Transfer，简称REST）为基础的API设计原则。

来自Markdown记法备忘单：

GraphQL是什么？

以下摘自Hasura

GraphQL是一种面向API的语言规范。
一般情况下，GraphQL在HTTP上使用，其重要概念是不像为不同资源分配不同的HTTP终端点，而是将“查询”以POST的方式发送到HTTP终端点。

GraphQL 是一个专注于客户端和服务器之间数据查询的语言。

“查询语言是什么？”

“查询”一词指的是”问题”或”询问”的意思。
直译过来，查询即为询问的语言，并且在Google搜索中，输入到搜索框中的字符串也可以看作是一种查询语言。

用了会变得多方便呢？

与以往主流的REST API不同

型指定でデータが明確になる

有以下优点！

让我们来实际编写GraphQL吧！

由于只是学习GraphQL的概念并不能说我理解了，所以让我们来写一写吧！这次我们将使用Apollo Server进行实现。

请在任意目录下运行以下命令。

npm i graphql apollo-server -D

[graphql]: 這是用於建立GraphQL模式並執行查詢的庫。
[apollo-server]: 這是Apollo Server的核心庫。
[-D]: 這是在開發環境中安裝時使用的選項。

為了打開開發伺服器，我們稍微修改一下package.json的內容。

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
-  "main": "index.js",
+  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "dev": "node server.js" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "apollo-server": "^3.12.0", 
    "graphql": "^16.6.0" 
  }
}

现在让我们开始在server.js中写代码吧！我将在注释中补充关于代码的说明。


const  { ApolloServer, gql } =  require("apollo-server");

// GraphQLスキーマを定義
// どういう風にAPIに対して問合せしているか記述されている
// クライアントはtestというクエリを実行し、0個以上の[Comic]配列を返却します
const typeDefs =  gql`
  type Comic {
    title:String,
    author: String
  }

  type Query {
    test: [Comic]
  }
`;


// データの定義
const comics = [
  {
    title: "チェンソーマン",
    author: "藤本タツキ"
  },
  {
    title: "ドラえもん",
    author: "藤子・F・不二雄"
  },
]


// Resolverの定義
// testといったキーが叩かれたときにレスポンスするものを定義しています
const resolvers = {
  Query:{
    test:() => comics
  }
}

//初期時に、スキーマ・データ・ResolverをApolloサーバーに渡します
const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({url}) => {
  console.log(`Server ready at ${url}`)
})

关于Resolver的内容有些复杂，如果您想要了解详情，请参考这里！

在写完以上的代码后，通过运行`npm run dev`来实际启动Apollo Server！通过这样，您可以进行GraphQL的测试。

请参考下方图片示例。

点击首页，查询您的服务器。

如果想要获取标题和作者，请提供一个选项：

如果只需获取标题，则可以这样做

正如上述，GraphQL可以只获取所需数据。
这很方便啊！

使用响应数据与React等前端库进行集成，以便进行开发。这种方法被广泛应用。

结束

我打算在不久的将来，根据这段代码使用React制作前端，并写文章将其发布出来。

鉴于我自己是GraphQL的初学者，我将它总结为备忘录。希望这篇文章对你有所帮助。

可以使用以下的方式转述这句话：
请提供参考资料。

GraphQL公式文件
REST API是什么？大致思考一下
Hasura GraphQL入门
GraphQL入门

首先