同学，GraphQL了解一下：实践篇

上一篇：GraphQL了解一下：基础篇
下一篇：GraphQL进阶篇: 挥手Redux不是梦
在基础篇主要讲了GraphQL出现的意义与一些基础语法。如果对GraphQL还不是很了解的同学可以点击上方链接了解一下，再来跟进这一篇的实践。本篇主要讲述实现一个GraphQL Server与在React应用中引入GraphQL，代码不难，推荐跟着手敲一遍。
下面文章的代码都可以通过github下载：地址传送，里面包含两个文件夹：graphqlServer(服务端)与graphqlApp(客户端)。

实现一个GraphQL Server

技术栈准备

核心依赖（npm包）：
express：Node服务端框架；
apollo-server-express：express graphql中间件，提供graphiqlExpress与graphqlExpress两个方法；
graphql：graphql js实现基础库；
axios：ajax通信，这里用于和已有的Restful API通信；
除了安装以上的核心依赖，你还需要安装babel相关的依赖，并配置babel编译文件，具体可查看上面git下来的文件配置。

搭建服务

怎么引入包这里不再赘述，我们先不带入graphql，启动一个express服务：

    const PORT = 8080;
    const app = express();  // 创建一个express服务；
    app.use('/graphql',  (req, res) => {
      res.send('Hello GraphQL!');
    });
    app.listen(PORT, () => console.log(`> Listening at port ${PORT}`));

启动这个服务，并在浏览器输入http://localhost:8080/graphql，可以看到Hello GraphQL这段欢迎词，到这里我们的后端服务已经搭建成功，接着我们创建我们的GraphQL服务，删除监听'/graphql'这个路由的代码，添加一下一段代码：

    import schema from './schema';
    const PORT = 8080;
    const app = express();  // 创建一个express服务；
    app.use(cors()); //这里添加cors，是因为我们后面前端会单独跑一个服务，所以涉及到前后端跨域
    app.use('/graphql', graphqlExpress({ schema }));
    app.use('/graphiql', graphiqlExpress({
        endpointURL: '/graphql'
    }));
    app.listen(PORT, () => console.log(`> Listening at port ${PORT}`));

至此，我们就添加了GraphQL服务，graphql是用于接收url请求的，而graphiql会呈现一个graphql查询界面，这个界面可以用于查询体验，查看文档定义，这是graphql官方比较推荐的一个技术，就像下面这样：

上面我们略过了schema，其实这个在上一篇就花了一定篇幅来讲解，其定义了整个graphql服务所支持的接口定义，照样贴上代码：

    import {
      GraphQLObjectType,
      GraphQLSchema,
      GraphQLInt,
      GraphQLID,
      GraphQLString,
      GraphQLList,
      GraphQLNonNull,
    } from 'graphql/type';
    import { getUser, getUsers, getUserMixNick } from '../service/index';
    
    // 查询某一个user的详细资料模型
    const UserType = new GraphQLObjectType({
      name: 'User',
      fields: {
        id: { type: GraphQLInt },
        userName: { type: GraphQLString },
        userMixNick: { 
          type: GraphQLString,
          args: {
            id: {
                type: new GraphQLNonNull(GraphQLID)
            }
          },
          resolve: (root, args, context, info) => {
            const { id } = root;
            console.log(info)
            return getUserMixNick(id);
          }
         },
        military: { type: GraphQLString },
        age: { type: GraphQLInt },
        height: { type: GraphQLInt },
        education: { type: GraphQLString },
        enlistTime: { type: GraphQLString },
        enlistYear: { type: GraphQLInt },
      }
    });
    
    // 查询所有的users
    const PaginationType = new GraphQLObjectType({
      name: 'Pagination',
      fields: {
        pageSize: { type: GraphQLInt },
        pageNum: { type: GraphQLInt },
        total: { type: GraphQLInt },
        data: {
          type: new GraphQLList(UserType)
        }
      }
    });
    // 定义schema
    const schema = new GraphQLSchema({
      query: new GraphQLObjectType({
        name: 'militaryQuery',
        fields: {
          user: {
            type: UserType,
            args: {
              id: {
                  type: new GraphQLNonNull(GraphQLID)
              }
            },
            resolve: (root, args, context, info) => {
              const { id } = args;
              return getUser(id);
            }
          },
          users: {
            type: PaginationType,
            args: {
              pageNum: { type: GraphQLInt },
              pageSize: { type: GraphQLInt }
            },
            resolve: (root, { filters, pageNum, pageSize }) => {
              return getUsers(filters, pageNum, pageSize);
            }
          }
        }
      })
    });
    
    export default schema;  
    

这里不想花太大的篇幅去讲解，可以git clone下来自己尝试一下，至此我们就成功的创建了一个GraphQL服务，可以在graphiql界面查询体会一下。

在React应用中引入GraphQL

核心依赖（npm包）：
react相关： 什么react,webpack，react-router-dom这些;
react-apollo与apollo-boost: 用于在app端创建一个GraphQL服务连接实例;
graphql与graphql-tag: 用于在app端发出一个GraphQL请求;

页面结构

页面大致是这样的一个结构，进入App的主页时，会加载兄弟连中主要的战士列表，点击查看详情，可以看到这名展示的一些详细信息，页面结构代码。

  <ApolloProvider client={client}>
    <Router>
      <div>
        <Route exact path="/" component={List} />
        <Switch>
          <Route exact path="/:id/detail" component={Detail} />
        </Switch>
      </div>
    </Router>
  </ApolloProvider>

这里需要强调一下client代码的实现：

    const client = new ApolloClient({
      uri: 'http://localhost:8080/graphql',  // 服务端接口
      batchInterval: 10,
      opts: {
        credentials: 'cross-origin', // App端单独跑了一个服务，所以涉及到跨域；
      },
    });      

列表页的实现

react-apollo在实现graphql结合react编程的方式上，借鉴了类似react-redux的connect高阶组件的思想，react-apollo提供一个方法graphql用于生成一个容器，这个容器会从远端拉去数据，然后作为props传递给展示组件,直接看代码的实现：

      // 创建一个查询  
      const USERS_QUERY = gql`
          query UserQuery($pageNum: Int,$pageSize:Int){
            users(pageNum:$pageNum,pageSize:$pageSize ) {
              pageNum
              pageSize
              total
              data {
                id
                userName
              }
            }
          }
    `;
    // 生成一个graphql容器，会执行USERS_QUERY这个查询；
    const withQuery = graphql(USERS_QUERY, {
      options: () => ({
        variables: {
          pageNum: 3,
          pageSize: 8
        },
      }),
    });
    // 列表展示组件
    class List extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      render() {
        const { data: { loading, users } } = this.props;
        if (loading) {
          return <div className="loading">Loading...</div>;
        }
        const { data: lists, total } = users;
        return (
          <div>
            <p className="total">总共有<span>{total}</span>名军士</p>
            <ul className="list">
              {
                lists.map(({ userName, id }, key) =>
                  <li key={key}>
                    <span>姓名：{userName}</span>
                    <Link to={`/${id}/detail`} >详情</Link>
                  </li>
                )
              }
            </ul>
          </div>
        );
      }
    }
    // 将数据注入到展示组件中
    const Character = withCharacter(List);
    export default Character;  
    

以上就是对列表展示组件的实现，思想还是比较简单，和我们基于react + redux编程比较像。

详情页的实现

其实现思路和列表页其实是一样的，只是涉及到动态传参的问题，上查询那一段代码说一下：

    const USER_QUERY = gql`
        query UserQuery($id: ID!){
          user(id:$id) {
            id,
            userName,
            age,
            military,
            height,
            education,
            enlistTime,
            enlistYear,
          }
        }
    `;
    const withQuery = graphql(USER_QUERY, {
      options: (props) => {
        const { match: { params } } = props; // 重点就是从props中获取路由传递的参数
        return {
          variables: {
            id: params.id
          },
        };
      },
    });  
    

withQuery这个高阶组件同样可以从父组件中获取props，然后通过其option方法动态的生成查询参数，至于详细页展示组件的实现，可以具体参考git上面的代码。
到最后输入url可以看到如下的结果：

思考

从写一个demo的角度来讲，在react中嵌入graphql好像比在在react中嵌入redux还简单，但如何在我们现有的框架中去嵌入graphql呢？比如Dva + graphql，比如react + redux + redux-thunk + graphql，在我的认知范围里，好像还需要时间去评估这一切值不值得，反正技术上肯定是可以实现的。引入graphql有多大价值，这也需要结合具体项目，具体业务，具体团队来说。愿你这两篇文章读完对GraphQL已经有了一个比较完整的认识，happy Ending!!!