GraphQL 入門: Apollo Client – 簡介

developerworks發表於2017-03-11
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的用途, 參考

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

相關文章