带有 redux-persist 的 Apollo
Apollo with redux-persist
我将 react-apollo 用于从我的 GraphQL 服务器获取数据集成到我的 React 本机应用程序中。我使用 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>
);
}
}
我将 react-apollo 用于从我的 GraphQL 服务器获取数据集成到我的 React 本机应用程序中。我使用 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>
);
}
}