apollographql / apollo-cache-persist

🎏 Simple persistence for all Apollo Cache implementations
MIT License
1.39k stars 118 forks source link

Can't make it work with React Native and Android #83

Closed ghost closed 5 years ago

ghost commented 5 years ago

Okay so I'm trying to implement your package in my react-native app but I can't seem to make it persist anything on Android. I enabled the debug mode and I can see Successfully persisted x data but when I relaunch the app, it says successfully restored x data where x is a ridiculously smaller amount than when it persisted it.

As seen in other issues, I also tried using cache.client instead of cache without any luck.

import { AsyncStorage } from "react-native";
import ApolloClient, { ApolloLink } from "apollo-boost";
import { InMemoryCache } from "apollo-cache-inmemory";
import { CachePersistor, persistCache } from "apollo-cache-persist";
import { registerScreens } from "../screens";
import { Navigation } from "react-native-navigation";
import { ApolloProvider } from "react-apollo";
import FSStorage from "redux-persist-fs-storage";
import { resolvers, defaults, typeDefs } from './resolvers';

const SCHEMA_VERSION = "0.0.242"; // Must be a string.
const SCHEMA_VERSION_KEY = "apollo-schema-version";

export async function setupApollo() {
    // Set up your cache.
    const cache = new InMemoryCache({
        dataIdFromObject: o => o.id,
    });

    const client = new ApolloClient({
        uri: 'http://localhost:4000/graphql',
        clientState: { resolvers, defaults, cache, typeDefs },
        cache,
    });

    const persistor = new CachePersistor({
        cache: client.cache,
        storage: FSStorage(),
        trigger: "background",
        debug: true
    });

    registerScreens(ApolloProvider, client);

    // Read the current schema version from AsyncStorage.
    const currentVersion = await AsyncStorage.getItem(SCHEMA_VERSION_KEY);

    if (currentVersion === SCHEMA_VERSION) {
        // If the current version matches the latest version,
        // we're good to go and can restore the cache.
        await AsyncStorage.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION);
        await persistor.restore();
    } else {
        // Otherwise, we'll want to purge the outdated persisted cache
        // and mark ourselves as having updated to the latest version.
        await persistor.purge();
        await AsyncStorage.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION);
    }

    console.disableYellowBox = true;

    // start the app
    Navigation.startSingleScreenApp({
        screen: {
            screen: "lm.SplashScreen",
            navigatorStyle: {},
            navigatorButtons: {}
        }
    });
}
horaciosystem commented 5 years ago

Try to pass the ApolloClient instance to the ApolloProvider only after the cache is restored.

  1. Create CachePersistor instance
  2. Wait for persistor restore or puge
  3. Create the ApolloClient instance
  4. Pass the apollo instance to the ApolloProvider.
wtrocki commented 5 years ago

Great explanation. Closing as resolved but feel free to reopen or create new issue.