@H_404_1@21 分钟学 apollo-client 是一个系列,简单暴力,包学包会。 @H_404_1@搭建 Apollo client 端,集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo store 数据
提供定制方案 @H_404_1@写入 store 的失败原因分析和解决方案
在 Redux 基础上添加 Apollo
其它教程
@H_404_1@Apollo 其实提供了示例仓库: @H_404_1@和 Redux 的集成也有这篇文章: Integrating with Redux | Apollo React Docs @H_404_1@说起来 GitHunt 这个库还蛮奇怪的,不同于其它教程一般把示例 repo 写得比较精简,这个 repo 搞了一堆东西来迷惑你。其中提到了
persistgraphql
等需要后端配合的东西,徒增了配置的复杂性。
@H_404_1@你可以先试试把上面的例子跑起来,毕竟代码比较全,也有助于你看懂我下一章节是如何进行封装的。如果不行,再跟随我的简单步骤试试。
环境要求
- 请确保你已经搭建了自己的 Redux 环境
- node >= 6.10
- npm >= 3.10
- react: 15 ~ 16
- redux: 3.x
- webpack: 2.x
-
表示删除的原代码, +
表示新增的代码。
@H_404_1@是的,就是从 git commit 里复制过来的
install package
npm i --save react-apollo npm i --save-dev graphql-tag@H_404_1@NOTE: 最近官方出了 react-apollo 2.x,但本文使用 1.x。所以检查下你下载的版本是不是 1.x 的。
update webpack.config.js
@H_404_1@增加对 .gql
文件的支持
// ... extensions: ['.web.js','.js','.jsx','.gql','graphql'],// ...
module: { rules: [ // ... { test: /\.(graphql|gql)$/,exclude: /node_modules/,loader: 'graphql-tag/loader',},] }
创建 client
@H_404_1@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; }@H_404_1@
apollo/index.js
import createApolloClient from './createApolloClient'; const client = createApolloClient(); export default client; export const apolloReducer = client.reducer();
添加 apollo reducer
@H_404_1@rootReducer.js
+ import { apolloReducer as apollo } from './apollo'; let reducersList = { // ... apollo,};
使用 Apollo 的 Provider
@H_404_1@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>@H_404_1@至此,你就搭建好了最简单的 ApolloClient。 @H_404_1@当然,生产环境不能止步于此。如果你是新手,那么请继续看如何简单使用;或者进一步的定制。