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 || 5000app.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},    })});// RocketTypeconst RocketType = new GraphQLObjectType({    name:'Rocket',    fields:()=>({        rocket_id:{type: GraphQLString},        rocket_name:{type: GraphQLString},        rocket_type:{type: RocketType},    })});//  Root Queryconst 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);            }        }    },});

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

图5react 生态