GraphQL 的小小进步👶

让我向您解释如何开始学习 GraphQL，同时理解每一部分代码。

让我向您解释如何开始学习 GraphQL，同时理解每一部分代码。

在开始本教程之前，我认为您需要了解一些事情，因为您可能需要了解以下主题的基础知识，但这不是必需的，因为我将解释每个代码，但它仍然可以帮助您建立坚实的基础：

1）JavaScript
2）NodeJS
3）ExpressJS

在本教程中，我们将学习如何创建一个后端 API，以便从服务器端读取数据（没错，就是读取）。“读取”指的是将数据从数据库位置返回到服务器端或 Web 应用程序前端的操作。

让我们从文件夹结构开始

gql 基础知识
         |
         -- 源码
         |
         -- 包.json  

依赖项安装：

graphql-yoga（基于 ExpressJS 的服务器框架）

yarn add graphql-yoga

设置

在 src 文件夹中创建 index.js 文件，它是主设置文件。在该文件中，从 graphql-yoga 导入 {GraphQLServer} 并创建其实例。

//进口
const { GraphQLServer } = require("graphql-yoga");

//实例
const 服务器=new graphQLServer（{
//等待这个！
})

什么是类型定义？

类型定义就像变量及其类型声明一样，例如：

//打开浏览器控制台

var 客户端 = [{
id：1，
姓名：“伊隆·马斯克”
}]

//现在检查类型
如果（客户端类型.name ===“string”）{true}否则{false}
//输出 = true

如果（typeof client.id ===“string”）{true}否则{false}
//输出 = false

与上面相同，我们必须创建一个文件并定义我们期望的每个数据及其类型。文件名将是 schema.graphql，我们将在 src 中创建该文件

gql 基础知识
         |
         -- 源码
              |
              --schema.graphql

现在我们将创建第一个具有该类型的数据。在 GraphQL 中，只读数据始终在核心查询元素中定义，其余数据（创建、更新、删除）则在核心元素突变元素中定义。

//src/schema.graphql 内部

输入查询{
  测试：字符串！}

以下是对上述代码的解释：

• type：用于定义其中的数据类型的元素。
• 查询：查询是 graphql 的只读核心元素
• 测试：测试被称为字段，认为它是一个可以包含任何内容的变量，例如“functions()”，“String”，“Boolean”和“test”是我们为字段指定的自定义名称，我们希望从数据库中获取该字段，例如它可以是任何内容，例如“您的提要中的推文”，“电子邮件”，“您搜索的博客文章”
• 字符串！：它定义了我们期望从测试字段中获得的数据类型。末尾的“！”符号定义它不能为空，这意味着如果您在控制台中请求名为“测试”的字段，您将始终获得数据。

询问

现在在 src 中创建一个名为 Query.js 的文件

gql 基础知识
         |
         -- 源码
              |
              --schema.graphql
              |
              -- Query.js

现在创建一个值为空对象的变量

//src/Query.js 内部

const 查询 = {
  //
};

在对象内部，我们将定义当用户请求时“测试”字段会发生什么。在查询对象内部创建一个“Key：Value”对，并将键指定为测试，将值指定为字符串（双引号内的句子），因为我们之前定义测试字段将只返回字符串类型的值。

//src/Query.js 内部

const 查询 = {
  测试：`Hello Dev.to 社区 :)`
};
//NodeJS 导出模块的风格
//与 like 相同：export {Query};
module.exports = {查询}

运行服务器

现在我们将在 index.js 中的 GraphQLServer 中传递参数，然后启动服务器。看一看：

const { GraphQLServer } = require("graphql-yoga");
const { 查询 } = require("./Query");
const 解析器 = {
  询问
 
};


const 服务器 = new GraphQLServer({
  typeDefs: “./src/schema.graphql”，
  解析器
});

服务器.启动（_ =>
  console.log(`您的服务器正在 http://localhost:4000 上运行`)
（此处似有缺失，请提供更正后的文本）。

这里，GraphQL 服务器接受一个对象作为参数，我们必须传递两样东西：1）“schema.graphql”文件中的“类型定义”；2）“解析器”，它们本质上是从数据库获取数据并返回给我们的文件。例如，我们的“Query.js”文件返回了一个硬编码的字符串（因为我们在本文中没有使用任何数据库）。之后，我们使用“start()”方法（来自 graphql-yoga）启动了服务器，并编写了一个函数来记录包含成功消息的模板文字。

现在您可以使用以下命令运行您的第一个服务器：

//从你的 gql-basics 内部
//输入以下代码来启动服务器文件
节点 src/index.js

它将打开一个 GraphQL 游乐场，如下图所示：

快点🎉！就这样，我们创建并理解了 graphql 的基础知识，感谢大家花时间学习 graphql，如果喜欢本教程，欢迎在推特上分享。

下次我将尝试解释 Mutation 的工作原理，祝您编码愉快！！