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);