Used persisted cache on first-load

[amaury1093]

Feature Request

Let's imagine a simple scenario, where I can of/off a toggle (where isOn is a boolean).

const MY_QUERY = gql`query getToggle() {
  getToggle() {
    _id
    isOn
  }
 }`;

const MY_MUT = gql`mutation setToggle($input: Bool!) {
  setToggle(input: $input) {
    _id
    isOn
  }
}`;

// In a React component
const { data } = useQuery(MY_QUERY);
const [setToggle] = useMutation(MY_MUT);

<Button onClick={() => setToggle(!data?.getToggle.isOn}}>Toggle</Button>
<p>isOn? {data?.getToggle.isOn}</p>

Repro:

• Assume the graphql data has isOn = false at start
• Click on the "Toggle" button, isOn becomes true, it gets updated on backend
• Close the app (in my case a React Native app)
• Re-open the app

Expected:

• On startup, it should directly show isOn = true

Actual:

• On startup, it shows isOn = false for ~1s, and once the MY_QUERY query resolves, it shows isOn = true

Is your feature request related to a problem? Please describe.

I'd like to remove the small delay of fetching query at startup.

Describe the solution you'd like

Possibly persist all apollo client cache inside AsyncStorage?

Describe alternatives you've considered**

I'm using https://github.com/apollographql/apollo-cache-persist right now. It works, but I was wondering if there's a plan to directly integrate that inside offix?

[wtrocki]

Your code needs to await for the cache to restore data: https://github.com/aerogear/offix/blob/master/examples/react/src/index.js#L16

There is possibility to use synchronous api thanks to Apollo-Cache-Persist but we do not recommend or document this use case.