反应原生 – Apollo与redux-persist

发布时间：2020-12-15 05:04:15 所属栏目：百科来源：网络整理

导读：我集成了 react-apollo ,用于从我的GraphQL服务器获取数据到我的反应本机应用程序.我使用redux-perist来持久化和再水化redux商店. 但我不知道如何补充我的阿波罗州. 谁知道我怎么能这样做？谢谢您可以使用redux-persist的autoRehydrate功能.它将异步运行RE

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

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

谁知道我怎么能这样做？

谢谢

您可以使用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>
    );
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!