GraphQL 入门: Apollo Client - 简介

GraphQL 入门: 简介
GraphQL 入门: Apollo Client - 简介
GraphQL 入门: Apollo Client - 安装和配置选项
GraphQL 入门: Apollo Client - 链接到数据
GraphQL 入门: Apollo Client - 网络层
GraphQL 入门: Apollo Client - 开发调试工具
GraphQL 入门: Apollo Client - 持久化GraphQL查询概要
GraphQL 入门: Apollo Client - 存储API
GraphQL 入门: Apollo Client - 查询(Batching)合并

如今咱们已经建立了一个ApolloClient实例而且使用ApolloProvider附加到了UI组件树, 咱们能够开始使用react-apollo的主要功能: 添加GraphQL功能到咱们的UI组件当中.

GraphQL

graphql 容器是用于获取或修改数据推荐的方法. 他是一个高阶组件, 用于把Apollo的数据提供给组件.

graphql 的基本使用方法以下:

# 导入须要的组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';   // React 15.5 只有把React.PropTypes 分离到单独的包中
import { graphql, qql } from 'react-apollo';

// 定义一个普通的React组件
class MyComponent extends Component {
  render() {
    return <div>...</div>;
  }
}

// 使用`gql`标签初始化GraphQL查询和数据变动
const MyQuery = gql`
query MyQuery { 
    todos { 
        text 
    } 
}
`;
const MyMutation = gql`
mutation MyMutation { 
    addTodo(text: "Test 123") { 
        id 
    } 
}`;

// 数据绑定传入MyQuery和MyComponent, 返回一个包含数据的React组件
const MyComponentWithData = graphql(MyQuery)(MyComponent);

// 返回一个包含数据更新的React组件
const MyComponentWithMutation = graphql(MyMutation)(MyComponent);

若是使用 ES2016 decorators, 能够这样写:

import React, { Component } from 'react';
import { graphql } from 'react-apollo';

@graphql(MyQuery)
@graphql(MyMutation)
class MyComponent extends Component {
  render() {
    return <div>...</div>;
  }
}

graphql 函数接受2个参数:

• query: 必须, 一个使用gql tag解析的GraphQL文档

• config: 可选, 一个配置对象, 详细的描述以下

该配置对线能够包含一个或多个下面的选项:

• name: Rename the prop the higher-order-component passes down to something else

• options: Pass options about the query or mutation, documented in the queries and mutations guides

• props: 在传递给子组件前修改属性.

• withRef: Add a method to access the child component to the container, read more below

• shouldResubscribe: A function which gets called with current props and next props when props change. The function should return true if the change requires the component to resubscribe.

graphql 函数返回另外一个函数, 他接受任何React组件而且返回一个特定查询包裹的新React组件类. 这和Redux中的connect是相似的.

graphql 函数的详细说明可参考 queries 和 mutations

withApollo

withApollo 让 咱们把ApolloClient 做为组件的属性直接访问:

import React, { Component } from 'react';
import { withApollo } from 'react-apollo';
import ApolloClient from 'apollo-client';
# 建立一个普通的React组件
class MyComponent extends Component { ... }

MyComponent.propTypes = {
  client: React.PropTypes.instanceOf(ApolloClient).isRequired,
}
const MyComponentWithApollo = withApollo(MyComponent);
// or using ES2016 decorators:
@withApollo
class MyComponent extends Component { ... }

而后咱们可经过 MyComponent.client 访问 ApolloClient 实例.

注: 关于propTypes的用途, 参考

• PropTypes

• 属性校验

• React 之 propTypes

withRef

若是须要访问被包裹的组件, 能够在选项中使用withRef. 能够经过调用返回组件的getWrappedInstance获取被包裹的实例.

import React, { Component } from 'react';
import { graphql } from 'react-apollo';

# 一个普通的React组件
class MyComponent extends Component { ... }
# 经过graphql函数返回的组件
const MyComponentWithUpvote = graphql(Upvote, {
  withRef: true,
})(MyComponent);

// 调用返回组件的getWrappedInstance方法可获得MyComponent 
// MyComponentWithUpvote.getWrappedInstance() returns MyComponent instance

compose

react-apollo 导出了一个compose函数. 用于减小书写代码的量.

import { graphql, compose } from 'react-apollo';
import { connect } from 'react-redux';

export default compose(
  graphql(query, queryOptions),
  graphql(mutation, mutationOptions),
  connect(mapStateToProps, mapDispatchToProps)
)(Component);