GraphQL

简介

定义

一种用于API的查询语言。

△GraphQL在应用中所处的位置

核心思想

• 请求你想要的数据，不多不少
  传统API调用后获取的内容一般是由后端决定的，哪怕前端只需要一个字段的值也会返回一个完整的res.data.result。而GraphQL提供的数据查询方式可以只获取需要的数据。
• 获取多个资源只用一个请求
  不仅可以获取资源的属性，还支持关系数据的查询。

使用方法

先推荐一个开放API，拥有无穷无尽数据的美国太空探索技术公司spaceX的官方API

服务端使用——Node.js

初始化

1. 使用express 项目名搭建脚手架
2. 安装使用GraphQL需要的依赖项：

npm install graphql express-graphql axios

此处安装axios是为了直接发送请求获取数据，也可选择使用Postman中的GraphQL测试

3. 在app.js文件中设置路由，表示所有的客户端请求都由GraphQL的requst handler处理

const graphqlHTTP = require('express-graphql');
const schema = require('./schema');

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true
}));

graphqlHTTP是grapql的http服务，用于处理graphql的查询请求，它接收一个options参数，其中schema是一个 GraphQLSchema实例，graphiql设置为true可以在浏览器中直接对graphQL进行调试。

4. 新建schema.js文件，定义两个数据模型：LaunchType（发射）和 RocketType（火箭）

const { GraphQLObjectType, GraphQLInt, GraphQLString, GraphQLBoolean, GraphQLList, GraphQLSchema } = require('graphql');

const LaunchType = new GraphQLObjectType({
  name: 'Launch',
  fields: () => ({
    flight_number: { type: GraphQLInt },
    mission_name: { type: GraphQLString },
    launch_date_local: { type: GraphQLString },
    launch_success: { type: GraphQLBoolean },
    rocket: { type: RocketType },
  })
});

const RocketType = new GraphQLObjectType({
  name: 'Rocket',
  fields: () => ({
    rocket_id: { type: GraphQLString },
    rocket_name: { type: GraphQLString },
    rocket_type: { type: GraphQLString }
  })
});

schema中的数据类型要使用GraphQL提供的类型系统中的类型，不能使用javascript中的数据类型

5. 使用axios发送请求获取spaceX官方API的数据

const axios = require('axios');

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    launches: {
      type: new GraphQLList(LaunchType),
      resolve(parent, args) {
        return axios.get('https://api.spacexdata.com/v3/launches').then(res => res.data);
      }
    }
  }
});

module.exports = new GraphQLSchema({
  query: RootQuery
});

RootQuery是所有查询的入口，用于处理并返回数据

使用GraphiQL查看效果

项目文件夹下npm start，浏览器中输入 http://localhost:5000/graphql (需要在/bin文件夹下的www文件中指定端口号)启动GraphiQL

• 查询所有的flight_number:
  
• 查询想要的更多数据：
  

指定参数实现单条数据查询

schema.js：

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
        ...
        launch: { // 新的schema
            type: LaunchType,
            args: { // 添加参数
                flight_number: {
                    type: GraphQLInt
                }
            },
            resolve(parent, args) {
                return axios.get(`https://api.spacexdata.com/v3/launches/${args.flight_number}`).then(res => res.data);
            }
        }
    }
});

前端——Vue

待续…

---

• GraphQL官方文档