GraphQL 学习

客官°小女子只卖身不卖艺 2022-03-06 03:36 282阅读 0赞

# GraphQL 学习 #

## 一、什么是GraphQL ##

一种用于 API 的查询语言

## 二、学习GraphQL ##

开始撸码学习

### 1.写一个 server.js 文件 ###

使用命令
    1. 使用 npm init -y 初始化一个 package.json 文件
    2. 安装所需插件 npm install express express-graphql graphql -S

![项目名称不能使用grahql][grahql]  
![正确示例][2552655320-5c7657a76684a_articlex]

遇上错误如上:项目名称不能使用 grapql，修改成 my-graphql

### 2.启动项目测试 ###

命令: node server.js

![端口占用][918568744-5c7657a76fa25_articlex]

遇上端口占用问题，停掉或者改用其他端口。

![杀死端口][3620303360-5c7657a73b3e3_articlex]

相关命令: 
        lsof -i :4000
        kill -9 端口号（上图为,47806）

![启动成功][4280639330-5c7657a6d08eb_articlex]

如上所示，启动成功。
    访问地址: localhost:4000/graphql

![访问成功][3081009185-5c7657a6c21ca_articlex]

访问成功

### 3.定义复杂类型 ###

定义一个 学生类型 student

运行结果

![不同类型][2004149268-5c7657a6e69c6_articlex]

### 4. 定义参数类型 ###

新建一个 baseType.js文件

运行该文件 node baseType.js
    在浏览器查看结果,如下

![数据类型][2357569751-5c7657a6dd6a5_articlex]

示例二

![示例二][692246794-5c7657a6973e7_articlex]

## 三、使用GraphQL ##

### 1.在客户端访问graphql的接口 ###

#### 1.1 允许静态资源访问目录 ####

app.use(express.static('public'));

![允许静态资源访问目录][1051419779-5c7657a5e82e2_articlex]

#### 1.2 在 public 目录下添加 index.html 文件 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>graphql 客户端访问接口</title>
    </head>
    <body>
    <button onclick="getData()">获取数据</button>
    </body>
    
    <script>
        function getData() {
            const query = `
                query Student($username:String,$number:Int){
                    student(username:$username){
                        name
                        age
                        sex
                        grade(number:$number)
                    }
                }
            `;
    
            const variables = {username: '张三丰', number: 56};
    
            fetch('/graphql', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    query: query,
                    variables: variables
                })
            }).then(res => res.json)
                .then(json => {
                    console.log(json);
                })
        }
    </script>
    </html>

#### 1.3 重新启动 ####

node baseType.js

#### 1.4 查看访问结果 ####

![演示结果][3152419452-5c7659ae72fe1_articlex]

### 2. 在客户端修改数据 ###

创建一个文件，用于测试 插入数据、更新数据。

#### 2.1 新建一个 mutation.js 文件 ####

创建一个 mutation.js 文件

#### 2.2 执行查看结果 ####

node mutation.js

![演示结果][412143746-5c7657a609c90_articlex]

#### 2.3 认证中间件 ####

创建一个 middleware.js 文件，用于测试

![演示结果][404141855-5c7657a60d5c9_articlex]

添加 auth值

![演示结果][1661261329-5c7657a598335_articlex]

## 3. 使用ConstructingTypes 类型 ##

为了便于维护，使用 ConstructingTypes 类型

#### 1.创建 constructingTypes.js 测试文件 ####

查看运行结果

![演示结果][786540958-5c7657a59f13f_articlex]

## 四.与数据库相结合 ##

### 1.创建测试数据库 test ###

在 test数据库下面 创建 student 表

![数据库表student][student]

### 2.在安装mysql插件 ###

在 npmjs.com 网站找 mysql
    安装
     npm install mysql2 -S

### 3. 创建 database.js 测试文件 ###

### 4.查看演示结果 ###

启动 node database.js

![演示结果][903155512-5c7657a5a705f_articlex]

![数据库结果][821804868-5c7657a58b677_articlex]

[grahql]: /images/20220306/328fbbe6bd6545a481dba88521b2c800.png
[2552655320-5c7657a76684a_articlex]: /images/20220306/7a24c97475614502ba7aeb4b07f95748.png
[918568744-5c7657a76fa25_articlex]: /images/20220306/1c5a6d8be3984098ab398b83f69a9ad0.png
[3620303360-5c7657a73b3e3_articlex]: /images/20220306/30951e56a71a4a8c8afbf9cb9676eb52.png
[4280639330-5c7657a6d08eb_articlex]: /images/20220306/17ceff28393d4f51bf3c088a36387556.png
[3081009185-5c7657a6c21ca_articlex]: /images/20220306/a6de3f2399aa4372b596446dfb004fc8.png
[2004149268-5c7657a6e69c6_articlex]: /images/20220306/4ce310db8b624389aad72fbdf47ae508.png
[2357569751-5c7657a6dd6a5_articlex]: /images/20220306/c1ab0eebeb344d36bbb85ba231e1d7cd.png
[692246794-5c7657a6973e7_articlex]: /images/20220306/aaaadedf8504427e8b5197e996ce1e54.png
[1051419779-5c7657a5e82e2_articlex]: /images/20220306/ba3d9255f97c439ba42ed39d0aa6e93e.png
[3152419452-5c7659ae72fe1_articlex]: /images/20220306/ef2298213b914105987b338d413712eb.png
[412143746-5c7657a609c90_articlex]: /images/20220306/cd05a54c6dca46ac9132a37db7fd04af.png
[404141855-5c7657a60d5c9_articlex]: /images/20220306/5f210da94a5a4ec4adc6b6b23873e6fd.png
[1661261329-5c7657a598335_articlex]: /images/20220306/e22ab2dfe70c4639927fd56993ee0bb6.png
[786540958-5c7657a59f13f_articlex]: /images/20220306/b27fbc5864254e809f32904693cdce06.png
[student]: /images/20220306/cc9befc0b02e482292d7db54a49d6551.png
[903155512-5c7657a5a705f_articlex]: /images/20220306/75abf2f7a14a47c8acc56dd46659e3c3.png
[821804868-5c7657a58b677_articlex]: /images/20220306/66ceb3a852594c63ad3396ab337fbd18.png