tinkgu发布于 2017-09-18

21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。

搭建 Apollo client 端，集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo store 数据
提供定制方案

apollo store 存储细节
写入 store 的失败原因分析和解决方案

推荐先看：GraphQL 入门: 连接到数据
本文只做补充。

下面编写一个最简单的 Container，观察是否能 query 到数据。

container.jsx

import React, { PureComponent } from \'react\';import { graphql } from \'react-apollo\';import query from \'./query.gql\';@graphql(query)export default class ApolloContainer extends PureComponent { render() { console.log(this.props); return div Hello Apollo /div }

@graphql(query) 是 apollo 提供的高阶组件，以装饰器的形式包裹你的组件。这里是最简单的情况，只传一个 query。

基本的 query 语法可以参看官方文档 Queries and Mutations | GraphQL，这里提一下 Apollo 特有的一些语法。

query.gql

#import \"../gql/pageInfo.gql\"#import \"@/gql/topic/userTopicEntity.gql\"query topic($topicId: Int!, $pageNum: Int = 1) { community { topicEntity { listByTopicId(topicId: $topicId, pageSize: 10, pageNum: $pageNum) { pageInfo { ...pageInfo edges { ...userTopicEntity}

前两行 import 了其它的 fragment。想必你已经知道，GraphQL 主要通过 fragment 来组合分形 Query。一个好的实践是尽量对业务实体编写 fragment 以便复用。
代码脱敏的关系我就不放详细的 fragment 了。

上一节我们在 webpack 中配置了 graphql-tag/loader，这个 loader 允许你将 query 、fragment 这些 schema 字符串，以 .gql 文件的形式保存，在 import 时转化成 js 代码。

其余部分，基本上和 GraphQL 原生写法是一样的，注意几个点：

对了，为了最小化实践，你可以先写不带参数的 query。也先不要写 union type。

这样就好了吗，是的。一旦组件挂载后，会自动进行数据请求，前提是客户端提供的 query schema 和后端的相符。

如果请求成功后，会发生什么事情呢？我们可以查看 this.props 打出的 log 来验证：

// this.props // .... data: { // ... community: { ... }, // 这是获取到的数据，结构和你提供的 query schema 一致 loading: false, // 请求过程中为 true networkStatus: 7, // 从 0-8，具体值的含义看这个文件 https://github.com/apollographql/apollo-client/blob/master/src/queries/networkStatus.ts variables: { ... }, // 请求时所用的参数 fetchMore, // 一个函数，用于在组件内「继续请求」，一般用于分页请求 refetch, // 函数，用于组件内「强制重新请求」 updateQuery, // 请求成功后立即调用，用于更新本地 store}

我们仅改写装饰器部分

@graphql(query, { skip: props = !isValid(props), options: props = ({ variables: { topicId: getIdFromUrl(),})

其中