21 分钟学 apollo-client 系列:简单搭建

前端之家收集整理的这篇文章主要介绍了21 分钟学 apollo-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。

当然,生产环境不能止步于此。如果你是新手,那么请继续看如何简单使用;或者进一步的定制

原文链接:https://www.f2er.com/react/302798.html

猜你在找的React相关文章