express graphQL 开发前端中间件

安装前置依赖

javascript 复制代码

 npm i express
 // 转化es 
 npm i babel-preset-env babel-cli babel-preset-stage-0
 // 添加watch
 npm i -D nodemon
 // 添加graphql
 npm i graphql graphql-http

添加启动命令

javascript 复制代码

"start": "nodemon index.js --exec babel-node --presets env stage-0"

创建入口文件

在根目录下创建index.js

javascript 复制代码

import express from 'express'; // yarn add express

const app = express();

app.listen({ port: 4000 });

json-server可以模拟接口

以下为模拟的数据，学生的基本信息和基本学习成绩

javascript 复制代码

{
  "user": [
    {
      "id": 1,
      "name": "张三",
      "age": "30",
      "gender": 1
    },
    {
      "id": 2,
      "name": "李四",
      "age": "23",
      "gender": 0
    }
  ],
  "grade": [
    {
      "id": 1,
      "Language": 53,
      "Maths": 100,
      "science": 60
    },
    {
      "id": 2,
      "Language": 39,
      "Maths": 40,
      "science": 34
    }
  ]
}

/**
 package.json 添加命令，来创建mock接口   
 分别为 http://localhost:3300/user 和 http://localhost:3300/grade
**/
"json-server": "json-server --watch ./mock/index.json --port 3300"

创建query请求

假设要将两个接口合并成一个，查询所有学生以及他们对应的成绩

./router下创建query.js

javascript 复制代码

import axios from 'axios'
// 引入所需的类型，graphQL只能用他自己的类型
import {
  GraphQLObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
  GraphQLInputObjectType
} from 'graphql';

// 学生基础信息的类型
const userArgs = {
  id: {type: GraphQLInt},
  name: {type: GraphQLString},
  age: {type: GraphQLString},
  gender: {type: GraphQLInt}
}

// 请求时入参的类型声明
const queryParamsType = new GraphQLInputObjectType({
  name: 'queryParamsType',
  fields: userArgs
})

// 返回成绩的声明
const GradeType = new GraphQLObjectType({
  name: 'GradeType',
  fields: {
    id: {type: GraphQLInt},
    Language: {type: GraphQLInt},
    Maths: {type: GraphQLInt},
    science: {type: GraphQLInt}
  }
})

// 返回的学生声明
const UserType = new GraphQLObjectType({
  name: 'UserType',
  fields: {
    id: {type: GraphQLInt},
    name: {type: GraphQLString},
    age: {type: GraphQLString},
    gender: {type: GraphQLInt},
    // 可以直接将要的数据放入声明里
    grade: {
      type: GradeType,
      // 直接通过resolve进行数据请求 parent是父级返回的数据
      resolve(parent) {
        return axios({
          url: `http://localhost:3300/grade`,
          params: { id: parent.id } // 在请求中带上参数
        }).then(result => {
          if(Array.isArray(result.data)){
            return result.data[0]
          }
          return result.data;
        });
      },
    }
  }
})


// 声明的query类型，并把他暴露出去
export const QueryType = new GraphQLObjectType({
  name: 'Query',
  fields: {
    user: {
      type: new GraphQLList(UserType),
      // 一定要将args带上，这是入参的声明
      args: {
        queryParams: {
          type: queryParamsType
        }
      },
      resolve(obj, args){
        return axios({
          url: 'http://localhost:3300/user',
          params: args.queryParams
        }).then(result => result.data)
      },
    }
  },
})

在index.js中使用

javascript 复制代码

import express from 'express'; // yarn add express
import { createHandler } from 'graphql-http/lib/use/express';
import {QueryType} from './router/query'
import {GraphQLSchema} from "graphql/index";

const app = express();
const schema = new GraphQLSchema({
  query: QueryType,
});

app.all('/graphql', createHandler({
  schema
}));

app.listen({ port: 4000 });

此时请求时的query

javascript 复制代码

// queryParams 中可以放我们的入参
{
  user(queryParams: {}) {
    id
    name
    age
    gender
    grade {
      id
      Language
      Maths
      science
    }
  }
}

创建mutation请求

操作和query请求基本没什么区别

javascript 复制代码

const PostUserType = new GraphQLInputObjectType({
  name: 'PostUserType',
  fields: {
    name: {type: GraphQLString},
    age: {type: GraphQLString},
    gender: {type: GraphQLInt},
  }
})
export const MutationType = new GraphQLObjectType({
  name: 'Mutation',
  fields: {
    createUser: {
      type: GraphQLBoolean, 
      args: {
        postParams: { type: PostUserType}
      },
      resolve(parent, args) {
        return axios.post('http://localhost:3300/user', args.postParams)
          .then((response) => {
            return true
          })
          .catch(error => {
            // 处理错误情况
            console.error('Error creating user:', error.message);
            throw new Error('Failed to create user.');
          });
      }
    }
  }
});

然后再index.js中使用

javascript 复制代码

const schema = new GraphQLSchema({
  query: QueryType,
  mutation: MutationType
});