带有 redux-persist 的 Apollo

Question

我集成了 react-apollo，用于从我的 GraphQL 服务器获取数据到我的 react 本机应用程序中。我使用 redux-perist 来持久化和补充 redux 存储。

但我不知道如何为我的阿波罗状态补充水分。

有人知道我该怎么做吗？

谢谢

Answer 1

您可以使用redux-persist 的autoRehydrate 功能。它将异步运行 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>
    );
  }
}