21 分鐘學 apollo-client 系列：簡單搭建

tinkgu發表於2017-09-18
client

21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。

搭建 Apollo client 端，整合 redux
使用 apollo-client 來獲取資料
修改本地的 apollo store 資料
提供定製方案

寫入 store 的失敗原因分析和解決方案

在 Redux 基礎上新增 Apollo

其它教程

Apollo 其實提供了示例倉庫：

和 Redux 的整合也有這篇文章： Integrating with Redux | Apollo React Docs

說起來 GitHunt 這個庫還蠻奇怪的，不同於其它教程一般把示例 repo 寫得比較精簡，這個 repo 搞了一堆東西來迷惑你。
其中提到了 persistgraphql 等需要後端配合的東西，徒增了配置的複雜性。

你可以先試試把上面的例子跑起來，畢竟程式碼比較全，也有助於你看懂我下一章節是如何進行封裝的。
如果不行，再跟隨我的簡單步驟試試。

環境要求

  • 請確保你已經搭建了自己的 Redux 環境
  • node >= 6.10
  • npm >= 3.10
  • react: 15 ~ 16
  • redux: 3.x
  • webpack: 2.x

下文在行號前新增 - 表示刪除的原始碼， + 表示新增的程式碼。

是的，就是從 git commit 裡複製過來的

install package

npm i --save react-apollo
npm i --save-dev graphql-tag

NOTE: 最近官方出了 react-apollo 2.x，但本文使用 1.x。所以檢查下你下載的版本是不是 1.x 的。

update webpack.config.js

增加對 .gql 檔案的支援

// ...
extensions: [`.web.js`, `.js`, `.jsx`, `.gql`, `graphql`],
// ...
module: {
    rules: [
        // ...
        {
            test: /.(graphql|gql)$/,
            exclude: /node_modules/,
            loader: `graphql-tag/loader`,
        },
    ]
}

建立 client

apollo/createApolloClient.js

import {
    ApolloClient,
    createNetworkInterface,
} from `react-apollo`;

export default function createApolloClient() {
    const networkInterface = createNetworkInterface({
        uri: `${yourGragqlUri}`,
        opts: {
            // fetch options
            credentials: `same-origin`,
        },
    });

    const client = new ApolloClient({
        networkInterface,
    });

    return client;
}

apollo/index.js

import createApolloClient from `./createApolloClient`;

const client = createApolloClient();

export default client;
export const apolloReducer = client.reducer();

新增 apollo reducer

rootReducer.js

+ import { apolloReducer as apollo } from `./apollo`;

let reducersList = {
    // ...
    apollo,
};

使用 Apollo 的 Provider

App.jsx

- import { Provider } from `react-redux`;
+ import { ApolloProvider } from `react-apollo`;

import store from `./configureStore`;
+ import client from `./apollo`;

// ...
- <Provider store={store}>
+ <ApolloProvider store={store} client={client}>
      { /* ... */ }
- </Provider>
+  </ApolloProvider>

至此，你就搭建好了最簡單的 ApolloClient。

當然，生產環境不能止步於此。如果你是新手，那麼請繼續看如何簡單使用；或者進一步的定製。

相關文章