Apollo với redux-persist

Question

Tôi đã tích hợp react-apollo để tìm nạp dữ liệu từ máy chủ GraphQL của tôi vào ứng dụng gốc phản ứng của tôi. Tôi sử dụng redux-perist để duy trì và bù nước cho kho lưu trữ redux.

Nhưng tôi không biết làm cách nào để bù nước lại trạng thái apollo của mình.

Bất kỳ ai biết cách tôi có thể làm điều đó?

Cảm ơn

Answer 1

Bạn có thể sử dụng tính năng autoRehydrate của redux-persist. Nó sẽ asyncronously chạy một hành động với loại REHYDRATE sẽ rehydrate tất cả các cửa hàng trừ khi bạn danh sách đen chúng.

Nếu bạn cố thực thi truy vấn trước đó, Apollo sẽ kiểm tra cửa hàng Redux trước và bạn sẽ thấy hành động APOLLO_QUERY_RESULT_CLIENT thực thi (nghĩa là nó trả về từ máy khách thay vì truy vấn máy chủ). Bạn có thể thay đổi fetchPolicy để xác định cách truy vấn được dữ liệu của nó (mạng chỉ, bộ nhớ cache đầu tiên, vv)

Dưới đây là một thiết lập cơ bản:

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