开始使用GraphQL

时间 2019-11-06

标签开始使用 graphql 繁體版

原文原文链接

为何要用graphql？

让咱们先回顾一下咱们如今所使用的API设计风格css

纯rest：一个endpoint对应一个资源

优势：灵活、解构
缺点：因为一个endpoint对应一个资源因此须要不少次请求html

类rest：一个endpoint对应一个视图

优势：一次请求、所得即所需
缺点：不够灵活、高度耦合、很高的维护成本、迭代慢前端

上面是咱们两种经常使用的接口方式，两种都有各自的优缺点，有没有能够包揽全部优势的方案呢？咱们须要一个标准的API层，那这就是GraphQL，请注意GraphQL是一个规范，是由facebook倡导的一个规范，不是一个实现。
GraphQL有下面三个定义：node

一个用来描述数据类型和关系的API定义语言
一个能够描述具体须要获取哪些数据的查询语言
一个能够resolve到数据单个属性的可执行模型

GraphQL是长什么样子的呢？
react

可能这样看起来还比较难理解，没事，咱们直接coding。git

GraphQL实践

因为GraphQL是一种规范，它不是一种实现，若是要本身实现仍是比较难的，不用担忧，强大的开源社区已经帮咱们准备好了，这就是Apollo开源项目。Apollo提供了丰富的后端实现（node支持：express、koa、hapi、restify等框架）和前端（React、RN、Angular、IOS、Android等）实现。官方文档：http://dev.apollodata.com/too...。下面的实践都是基于Apollo以nodejs的Express框架来实现的。
Demo代码：https://github.com/jasondu/ap...github

1、如何搭建GraphQL服务端

步骤

搭建服务器

import express from 'express';
import { 
  graphqlExpress, 
  graphiqlExpress, 
} from 'apollo-server-express';
import bodyParser from 'body-parser';
import schema from './data/schema';    // 定义GraphQL查询格式

const GRAPHQL_PORT = 3002;

const graphQLServer = express();

graphQLServer.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));    // 实现GraphQL接口功能
graphQLServer.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));    // 实现GraphQL浏览器调试界面

graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphiQL is now running on http://localhost:${GRAPHQL_PORT}/graphiql`
));

懂Express的童鞋应该均可以看到上面的代码，我作一下解释：数据库

apollo-server-express 是由Apollo提供在express环境下实现grapql的库，这里使用了里面两个类
graphqlExpress是实现grapql接口功能的类
graphiqlExpress是实现grapql浏览器调试界面（An in-browser IDE for exploring GraphQL.）的类，就多了一个“i”，这个调试界面能够在后面看到
schema就是上文讲的是定义GraphQL查询格式的

编写Schema

让咱们看看Schema.js是怎么写的express

import {
  makeExecutableSchema,
} from 'graphql-tools';
import resolvers from './resolvers';

// 定义schema
const typeDefs = `
type Author {   # 做者的字段有：id，名字，还有 发表的帖子
  id: Int
  firstName: String
  lastName: String
  posts: [Post]
}
type Post {    # 帖子的字段有下面这些，包括 这个帖子是哪一个做者写的
  id: Int
  title: String
  text: String
  views: Int
  author: Author
}
type Query {    # 定义查询内容
  author(firstName: String, lastName: String): Author # 查询做者信息
  getFortuneCookie: String
}
`;

const schema = makeExecutableSchema({ typeDefs, resolvers });

export default schema;

这里用到Apollo提供的makeExecutableSchema方法，这个方法是将Schema结构的数据转换成GraphQLSchema实例。
typeDefs里面定义了三个格式Author,Post,Query，这里Query就是查询的时候返回的结构，Author,Post是解释了在Query中的结构类型。
接下来，咱们就能够编写具体的实现了。npm

编写Resolvers

const resolvers = {
  Query: {
    author(root, args){    // args就是上面schema中author的入参
      return { id: 1, firstName: 'Hello', lastName: 'World' };
    },
  },
  Author: {
    // 定义author中的posts
    posts(author){
      return [
        { id: 1, title: 'A post', text: 'Some text', views: 2},
        { id: 2, title: 'Another post', text: 'Some other text', views: 200}
      ];
    },
  },
  Post: {
    // 定义Post里面的author
    author(post){
      return { id: 1, firstName: 'Hello', lastName: 'World' };
    },
  },
};

export default resolvers;

上面这段代码比较简单，就不作解释了。
至此，咱们就完成了一个GraphQL服务端的开发，加下来咱们npm i & npm start

呐，这样就启动啦！打开http://localhost:3002/graphiql就能够看到刚才前面说的graphiql，就是GraphQL浏览器调试界面。

graphiql能够支持联想功能，能够很是快的书写查询语句。

2、如何在客户端查询GraphQL数据（以react为例）

步骤

使用create-react-app建立一个项目，而且按照Apollo客户端解决方案库：react-apollo

create-react-app client & yarn add react-apollo

修改App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// -------- 添加内容 -------- //
import {
  ApolloClient,
  ApolloProvider,
  createNetworkInterface,
  gql,
  graphql,
} from 'react-apollo';

// 设置接口地址
const networkInterface = createNetworkInterface({ uri: 'http://localhost:3002/graphql' });

const client = new ApolloClient({
  networkInterface,
});

const Test = ({ data: { loading, error, author } }) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <h3>{author.firstName} {author.lastName}</h3>
  );
};
// 查询语句
const query = gql`
  query AuthorQuery {
    author (firstName: "firstName", lastName: "lastName") {
      firstName,
      lastName
    }
  }
`;

const Gtest = graphql(query)(Test);

// -------- 添加内容 -------- //

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <Gtest />
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        </div>
      </ApolloProvider>
    );
  }
}


export default App;

这里的写法跟redux相似，使用<ApolloProvider>包裹项目，经过graphql方法将数据注入到组件中。

而后执行yarn start 这样项目就启动了，以下图

注：这里存在跨域问题，因此服务器端须要使用cors解决跨域问题，具体看代码。