阿波罗与redux-persist

Question

我集成了react-apollo,用于将我的GraphQL服务器中的数据提取到我的react本机应用程序中.我使用redux-perist来持久化和再水化redux商店.

但我不知道如何补充我的阿波罗州.

谁知道我怎么能这样做？

谢谢

Answer 1

您可以使用autoRehydrate的功能redux-persist。它将异步运行一个操作，REHYDRATE该操作的类型将补充所有商店，除非您将它们列入黑名单。

如果您尝试执行之前执行过的查询，Apollo 将首先检查您的 Redux 存储，您应该看到一个APOLLO_QUERY_RESULT_CLIENT操作正在执行（这意味着它从客户端存储返回，而不是查询服务器）。您可以修改fetchPolicy来指定查询如何获取其数据（仅网络、缓存优先等）

这是一个基本设置：

import React, { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { persistStore, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';

const networkInterface = createNetworkInterface({ uri: 'http://localhost:8080/graphql' });

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

const store = createStore(
  combineReducers({
    apollo: client.reducer(),
  }),
  {}, // initial state
  compose(
    applyMiddleware(client.middleware()),
    autoRehydrate(),
  ),
);

// persistent storage
persistStore(store, {
  storage: AsyncStorage, // or whatever storage you want
});

export default class App extends Component {
  render() {
    return (
      <ApolloProvider store={store} client={client}>
        <YourApp />
      </ApolloProvider>
    );
  }
}