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

写于：2018-07-18

上一篇：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!!!

closertb / closertb.github.io