graphQL在react中的使用

1.创建一个graphQL客户端

import ApolloClient from "apollo-boost"

const client = new ApolloClient({  
    uri: "https://localhost/graphiql"
})

export default client

2.注入到app

import { ApolloProvider } from 'react-apollo';

ReactDOM.render(
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>
,document.getElementById('root'));

3.查询 (Query )数据

import React, { Component } from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_CURRENT_USER_QUERY = gql`
  query GetCurrentUser {
    me {
      username
    }
  }
`;
class CurrentUser extends Component {
  render() {
    return (
      <Query query={GET_CURRENT_USER_QUERY}>
        {({ data, loading, error }) => {
          if (error) return 'error';
          if (loading) return 'loading'
          return this.props.children(data.me);
        }}
      </Query>
    );
  }
}

4.修改 (Mutation) 数据

demo

import React, { Component } from "react";
import gql from "graphql-tag"; // 查询工具
import { Mutation } from "react-apollo";
import { GET_CURRENT_USER_QUERY } from "./CurrentUser";

const SIGNUP_MUTATION = gql`
  mutation SignUp($username: String!, $email: String!, $password: String!) {
    signup(username: $username, email: $email, password: $password) {
      token
      user {
        username
      }
    }
  }
`;

export default class Signup extends Component {
  state = {
    username: "",
    email: "",
    password: ""
  };
  
  // mutation结束之后获取到返回的数据并进行对应的操作
  handleCompleted = data => {
    console.log('do somethine...')
  };
  
  // mutation更新缓存，强制刷新
  handleUpdate = (cache, { data }) => {
    cache.writeQuery({
      query: GET_CURRENT_USER_QUERY,
      data: { me: data.signup.user }
    });
  };

  render() {
    return (
      <Mutation
        mutation={SIGNUP_MUTATION}
        variables={this.state} // 携带的参数
        onCompleted={this.handleCompleted} // 完成时触发
        update={this.handleUpdate}> // 数据更新时触发
        {(signup, { loading, error }) => {
          if (loading) return 'loading';
          if (error) return 'error';
          return (
            <form
              className="signup"
              onSubmit={e => {
                e.preventDefault();
                signup(); // mutation执行的函数
              }}>           
                <button type="submit">
                  Sign Up
                </button>
              </fieldset>
            </form>
          );
        }}
      </Mutation>
    );
  }
}