带有 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>
    );
  }
}

带有 redux-persist 的 Apollo

Apollo with redux-persist

react-native

react-redux

apollo

react-apollo