React native 阿波罗与雷多克斯

我集成了从GraphQL服务器获取数据到react本机应用程序的功能。我使用redux perist来保存和重新水化redux存储

但我不知道如何给我的阿波罗状态补水

有人知道我怎么做吗

---

谢谢

您可以使用

redux persist

的

autoRehydrate

功能。它将异步运行类型为

REHYDRATE

的操作，该操作将对所有存储进行重新水化，除非您将其列入黑名单

如果您尝试执行以前执行过的查询，Apollo将首先检查您的Redux存储，您应该会看到执行的

Apollo\u query\u RESULT\u CLIENT

操作（这意味着它将从客户端存储返回，而不是查询服务器）。您可以修改以指定查询获取其数据的方式（仅限网络、缓存优先等）

以下是一个基本设置：

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

import React，{Component}来自'React'；
从'react apollo'导入{ApolloProvider}；
从'redux'导入{createStore，combinereducer，applyMiddleware，compose}；
从“apollo客户端”导入apollo客户端，{createNetworkInterface}；
从“redux persist”导入{persistStore，autoRehydrate}；
从“react native”导入{AsyncStorage}；
const networkInterface=createNetworkInterface（{uri:'http://localhost:8080/graphql' });
export const client=新客户端({
网络接口：网络接口，
});
const store=createStore(
组合传感器({
apollo:client.reducer（），
}),
{}，//初始状态
谱写(
applyMiddleware（client.middleware（）），
自动脱水（），
),
);
//持久存储
商店{
存储：AsyncStorage、//或任何您想要的存储
});
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

谢谢@srtucker22！！我的问题是我使用了devTools（），然后使用了autoRehydrate（）。出于某种奇怪的原因，这不起作用，我必须先做autoRehydrate（），然后再做devTools（）。。现在它工作了@卡罗尔保佑你。你的解决方案刚刚结束了三天的咬指甲和拔头发。在

之前放置
autoRehydrate（）
（窗口类型.\uuuuu REDUX\u DEVTOOLS\u EXTENSION\uuuuvtools！='undefined'| | process.env.NODE\u env！==''production'）？窗口。uuu REDUX_DEVTOOLS_uuuextension:（f）=>f，

重新加载页面后保留的已解析数据。