React 生态 GraphQL Apollo (1)

graphql

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

npm i graphql express-graphql express axios 

安装依赖

• graphql
• express
• express-graphql
• axios

  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js"
  },

创建 sever.js

const express = require("express");
const graphqlHTTP = require("express-graphql");

const schema = require("./schema")

const app = express();

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

const PORT = process.env.PORT || 5000

app.listen(PORT,()=> console.log(`Server started on port ${PORT}`));

• 引入 graphqlHTTP 处理对应路由 /graphql，路由交给 graphqlHTTP 来处理。
• schema 这个单词英文意思有网络、模式、图式和架构意思。那么这里怎么理解 schema 的含义呢。以上意识中有一种规范意识，也就是我们怎么表述一个事物，这里说数据更好，也就是说通过给数据每个字段定义描述属性从而更好获取或是读取数据信息。

SpaceX.jpg

为了简化，这里使用 spaceX api 提供数据进行演示。通过 github 可以搜索到 api

定义 schema

const axios = require('axios');

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

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

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

//  Root Query
const RootQuery = new GraphQLObjectType({
    name:'RootQueryType',
    fields:{
        lauches:{
            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
});

• 首先我们导入表述字段内容类型的类型，例如这个字段是字符串呀还是数值类型

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_year:{type: GraphQLString},
        launch_date_local:{type: GraphQLString},
        launch_success:{type: GraphQLBoolean},
        rocket:{type: RocketType},
    })
});

我们可以类型定义一个名称 Launch，通过这个可以在 graphql 进行查询。然后定义该类型包含哪些属性。

定义好 schema ，然后运行程序在地址栏方法为 /graphql就可以看到下面的画面，我们就可以输入结构后，点击播放按钮，对应在右侧就可以到数据了，搜索出数据结构是由我们在左侧定义的结构而定。

图1 图2 图3

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

我们可可以再定义一个数据结构。

图5 react 生态