21 分钟学 apollo-client 是一个系列,简单暴力,包学包会。
搭建 Apollo client 端,集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo 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
// ... 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。