摘要：如果你對這系列文章有疑問或發(fā)現(xiàn)有錯誤的地方，歡迎在下方留言討論。

緊接上篇react+graphql起手和特性介紹（二），介紹完graphql與koa的服務搭建和graphql的一些常用特性，接下來我們介紹下在react中如何使用graphql
我們使用create-react-app創(chuàng)建react應用：

npm i -g create-react-app
mkdir react-graphql-app
create-react-app react-graphql-app

安裝以下前端依賴

npm install react-apollo graphql-tag graphql apollo-client apollo-cache-inmemory apollo-link-http

各個依賴包的作用：

apollo-link-http 請求配置和網(wǎng)絡請求能力

apollo-cache-inmemory 數(shù)據(jù)緩存

apollo-client 請求流程控制，生成請求數(shù)據(jù)，錯誤控制，響應數(shù)據(jù)解析

graphql-tag 查詢類的schema數(shù)據(jù)解析，包含對應的 webpack-loader

react-apollo 連接graphql與react

graphql 提供graphql的核心執(zhí)行能力

然后我們進行react和graphql的整合

// src/index.js

import React from "react";
import ReactDOM from "react-dom";

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloProvider } from "react-apollo";

import App from "./App";

// 我們可以自定義fetch，對請求進行統(tǒng)一處理
const customFetch = (uri, options) => {
    return fetch(uri, options);
};


const client = new ApolloClient({
    // 連接到graphql服務器
    link: createHttpLink({ uri: "http://localhost:9191/graphql", fetch: customFetch }),
    // 設置緩存
    cache: new InMemoryCache(),
});

// ApolloProvider 為react提供graphql能力
const WrappedApp = (
    
        
    
);

ReactDOM.render(WrappedApp, document.getElementById("root"));

為了能解析.graphql文件，需要修改webpack配置，添加graphql-loader

// config/webpack.config.dev.js && config/webpack.config.prod.js

...

module.exports = {
    ...
    
    module: {
        strictExportPresence: true,
        rules: [
            ...
            
            {
                // 解析 .graphql/.gql 后綴的loader
                test: /.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: "graphql-tag/loader",
            },
            
            ...
        ]
    }
    ...
}

我們以post為示例，講一下在組件中要做什么操作
創(chuàng)建定義查詢的schema文件

# src/post.graphql

# 導入 user.graphql
#import "./user.graphql"

# fragment 定義片段，可以用于多個地方
fragment PostInfo on Post {
    id
    title
    content
    userId
    user {
        ...UserInfo
    }
}

query getPost($id: ID!) {
    post(id: $id) {
        id
        title
        content
        userId
        user {
            id
            name
            age
            available
            birthday
            money
            gender
        }
    }
}

query getPosts {
    posts {
        ...PostInfo
    }
}


mutation createPost($data: PostInput!) {
    createPost(data: $data) {
        ...PostInfo
    }
}

# src/user.graphql

fragment UserInfo on User {
    id
    name
    age
    available
    birthday
    tags
    gender
    role
}

// src/App.js

import React, { Component } from "react";
import Post from "./Post";

class App extends Component {
    render() {
        return (
            

                
            
        );
    }
}

export default App;

// src/Post.js

import React, { Component } from "react";
import { Query, Mutation, ApolloConsumer } from "react-apollo";
// 導入查詢定義，定義的查詢名次對應導入對象的方法名稱，如 getPost => postQuery.getPost
import postQuery from "./post.graphql";

class Post extends Component {
    state = {
        post: {},
        postId: "",
        newPost: {
            title: "",
            content: "",
        }
    }

    render() {
        // 由ApolloConsumer傳入我們需要的數(shù)據(jù)，包含：
        // data 正常返回時的數(shù)據(jù)
        // loading 正在請求時loading會為true
        // error 發(fā)生錯誤時error將會有錯誤數(shù)據(jù)
        // 這里進行了重命名，將創(chuàng)建post，獲取posts列表進行了命名區(qū)分
        const { 
            client, 
            getPostsData, getPostsDataLoading,
            createPost, createPostData, createPostLoading, 
            getPostsDataError
        } = this.props;

        const { postId, post, newPost } = this.state;
        return(
            

                

                    {
                        // loading狀態(tài)時將顯示...
                        getPostsDataLoading ? 
                            
...
 
                            : 
                            (
                                getPostsDataError ? 
                                    // 有錯誤數(shù)據(jù)，將會顯示錯誤
                                    
{JSON.stringify(getPostsDataError)}
 
                                    : 
                                    // 正常則顯示請求到的數(shù)據(jù)
                                    
{JSON.stringify(getPostsData.posts)}
                            ) 
                    }
                

                


                

                     { 
                            this.setState({ postId: e.target.value }) 
                        }} 
                    /> 

                     {
                        // client 也是props傳過來的對象，可以讓我們主動發(fā)起請求
                        client.query({
                            // 對應定義的 getPost 查詢
                            query: postQuery.getPost,
                            // 設置請求參數(shù)
                            variables: {
                                id: postId
                            }
                        }).then(({ data: { post } }) => {
                            this.setState({
                                post
                            })
                        })

                    }}>
                        getPost
                    

                    
{JSON.stringify(post)}
                

                


                

                     this.setState({ 
                            newPost: { 
                                ...newPost, 
                                title: e.target.value,
                            } 
                        })}
                    />

                     this.setState({ 
                            newPost: { 
                                ...newPost, 
                                content: e.target.value,
                            } 
                        })}
                    />
                    
                     createPost({
                        // createPost是ApolloConsumer傳過來的包裝好的請求方法，
                        // 這里只用設置請求參數(shù)，loading，data，error 將會通過props
                        // 傳遞進來
                        variables: {
                            data: newPost
                        }
                    })}>
                        createPost
                    

                    {
                        createPostLoading ?
                            
...
 
                            : 
                            

                            {JSON.stringify(createPostData && createPostData.createPost)}
                            
                    }
                
            
            
        )
    }
}

class PostWrap extends Component {
    render() {
        return (
            
            {(client) => (
                // 傳入要使用的motation查詢
                
                    {(
                        // 方法重命名
                        createPost, 
                        { 
                            // 狀態(tài)數(shù)據(jù)重命名
                            data: createPostData, 
                            loading: createPostLoading 
                        }
                    ) => (
                       // 當同時多個查詢時，使用這種嵌套模式
                        
                                {({ 
                                    // 狀態(tài)數(shù)據(jù)重命名
                                    data: getPostsData, 
                                    loading: getPostsLoading, 
                                    error: getPostsDataError 
                                }) => 
                                    // 將重命名的狀態(tài)數(shù)據(jù)和查詢方法傳遞到組件中
                                    // Query指定的查詢在組件加載后就會自動發(fā)起請求
                                    }
                        
                    )}
                
            )}
            
        )
    }
}

export default PostWrap;

通過這種方式我們可以在react中使用graphql了，這種方式極大方便了我們對請求數(shù)據(jù)api的管理，而且可以通過整合查詢，減少頁面的請求次數(shù)。
如果你對這系列文章有疑問或發(fā)現(xiàn)有錯誤的地方，歡迎在下方留言討論。