react-apollo入门教程

声明: 转载请注明出处

官网

1.简介

react-apollo是Apollo数据栈在React环境的集成包之一，要在React里使用Apollo数据栈前端至少需要三个包：apollo-client、graphql-tag和react-apollo，apollo-client用于连接到Apollo后端，graphql-tag用于编写GraphQL查询，react-apollo用于执行GraphQL查询并将结果传给React的展示组件。

2.创建client

//默认client会将url设为 `/graphql`import { ApolloClient } from 'react-apollo';const client = new ApolloClient();

//当你需要改变graphql server的url的时候，需使用networkInterfaceimport { ApolloClient, createNetworkInterface } from 'react-apollo';const networkInterface = createNetworkInterface({  uri: 'http://api.example.com/graphql'});const client = new ApolloClient({  networkInterface: networkInterface);

3.创建provider,用于连接client和component

import { ApolloClient, ApolloProvider } from 'react-apollo';const client = new ApolloClient();ReactDOM.render(  <ApolloProvider client={client}>    <MyAppComponent />  </ApolloProvider>,  document.getElementById('root'))

4.使用

(1)Queries

1.1基本查询

import React, { Component } from 'react';import PropTypes from 'prop-types';import { graphql } from 'react-apollo';import gql from 'graphql-tag';class Profile extends Component { ... }// We use the gql tag to parse our query string into a query documentconst CurrentUserForLayout = gql`  query CurrentUserForLayout {    currentUser {      login      avatar_url    }  }`;const ProfileWithData = graphql(CurrentUserForLayout)(Profile)

1.2 参数查询

const CurrentUserForLayout = gql`  query CurrentUserForLayout($avatarSize: Int!) {    currentUser {      login      avatar_url(avatarSize: $avatarSize)    }  }`;const ProfileWithData = graphql(CurrentUserForLayout, {  options: { variables: { avatarSize: 100 } },})(Profile);

(2)Mutation

2.1基本修改

import React, { Component } from 'react';import PropTypes from 'prop-types';import { gql, graphql } from 'react-apollo';class NewEntry extends Component { ... }const submitRepository = gql`  mutation submitRepository {    submitRepository(repoFullName: "apollographql/apollo-client") {      createdAt    }  }`;const NewEntryWithData = graphql(submitRepository)(NewEntry);

2.2传参修改

//被包裹的组件会传递一个mutate作为props传递过去，可以用来传递mutation操作参数，如:import React, { Component } from 'react';import PropTypes from 'prop-types';import { gql, graphql } from 'react-apollo';class NewEntry extends Component {  onClick() {    this.props.mutate({      variables: { repoFullName: 'apollographql/apollo-client' }    })      .then(({ data }) => {        console.log('got data', data);      }).catch((error) => {        console.log('there was an error sending the query', error);      });  }  render() {    return <div onClick={this.onClick.bind(this)}>Click me</div>;  }}const submitRepository = gql`  mutation submitRepository($repoFullName: String!) {    submitRepository(repoFullName: $repoFullName) {      createdAt    }  }`;const NewEntryWithData = graphql(submitRepository)(NewEntry);//也可以对mutate根据需要进行自己的函数封装const NewEntryWithData = graphql(submitRepository, {  props: ({ mutate }) => ({    submit: (repoFullName) => mutate({ variables: { repoFullName } }),  }),})(NewEntry);//这时在component中可直接调用submitconst NewEntry = ({ submit }) => (  <div onClick={() => submit('apollographql/apollo-client')}>    Click me  </div>);

(3)使用compose

很多时候我们的页面中存在多个queries和mutation操作，这时候我们需要使用compose来进行组合

import { compose } from 'react-apollo';const ComponentWithMutations = compose(  graphql(submitNewUser, { name: 'newUserMutation' }),  graphql(submitRepository, { name: 'newRepositoryMutation' }))(Component);

5.执行Mutation后进行状态更新

5.1 refetchQueries

refetchQueries是用来更新缓存的简单方法，当你在执行完一次mutation操作后，可能会有一个或多个状态被影响，这时可以指定一个或多个需要执行的queries来刷新这部分store

mutate({  //... insert comment mutation  refetchQueries: [{    query: gql`      query updateCache($repoName: String!) {        entry(repoFullName: $repoName) {          id          comments {            postedBy {              login              html_url            }            createdAt            content          }        }      }    `,    variables: { repoFullName: 'apollographql/apollo-client' },  }],})

5.2 update

import CommentAppQuery from '../queries/CommentAppQuery';const SUBMIT_COMMENT_MUTATION = gql`  mutation submitComment($repoFullName: String!, $commentContent: String!) {    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {      postedBy {        login        html_url      }      createdAt      content    }  }`;const CommentsPageWithMutations = graphql(SUBMIT_COMMENT_MUTATION, {  props({ ownProps, mutate }) {    return {      submit({ repoFullName, commentContent }) {        return mutate({          variables: { repoFullName, commentContent },          update: (store, { data: { submitComment } }) => {            // 从CommentAppQuery 中读取出查询得到的缓存数据            const data = store.readQuery({ query: CommentAppQuery });           // 将mutation的结果放入查询得到的数据中            data.comments.push(submitComment);            // 将数据重新写入缓存中，实现数据的更新                        store.writeQuery({ query: CommentAppQuery, data });                   },        });      },    };  },})(CommentsPage);