The cache is restored at the start of the app but a query silently becomes null (only on iOS) about apollo-cache-persist

[n1ru4l]

Here is a quick snippet. If you need more details let me know, then I will try to write an expo snack when I got some more time 🤗

import React, { Component } from 'react'
import { persistCachePromise, apolloClient } from './apollo-client-setup'
import { ApolloProvider } from 'react-apollo'

// App is your react-native root component
// we delay any app rendering until the store is hydrated
export class App extends Component {
  constructor(...args) {
    super(...args)
    this.state = { isHydratingStore: true }
  }
  componentDidMount() {
    persistCachePromise.then(() => {
      this.setState({ isHydratingStore: false })
    })
  }
  render() {
    if (this.state.isHydratingStore) {
      return null
    }
    return (
      <ApolloProvider client={apolloClient}>
        <YourRealApp />
      </ApolloProvider>
    )
  }
}

[softhib]

Update : I realize that the problem maybe not comes from apollo-cache-persist but from apollo client. Because the problem only happens on iOS and not on Android.

Considering the following snippet :

render() {
if (this.props.queryUserLoggedInfos.networkStatus === 1) return null; 
const { userLogged } = this.props.queryUserLoggedInfos;
console.log("=========render userLogged==========");
console.log(userLogged);
console.log("====================================");

(...)

I got the following result on iOS :

[apollo-cache-persist] Restored cache of size 90659
=========render userLogged==========
{id: "5a2c769d4ef79d57e29c940a", pseudo: "sof", email: "[email protected]", avatar: "ws5icnrjntmd4bbbvlay", tribu: {…}, …}
====================================
=========render userLogged==========
{id: "5a2c769d4ef79d57e29c940a", pseudo: "sof", email: "[email protected]", avatar: "ws5icnrjntmd4bbbvlay", tribu: {…}, …}
====================================
remote-redux-devtools: Socket connection errors are being suppressed. 
This can be disabled by setting suppressConnectErrors to 'false'.
SocketProtocolError {name: "SocketProtocolError", message: "Socket hung up", code: 1006, stack: "SocketProtocolError: Socket hung up↵    at SCSocke…a/node_modules/expo/tools/hashAssetFiles:2316:42)"}
=========render userLogged==========
null
====================================
[apollo-cache-persist] Persisted cache of size 90595

So after the first two renders, the cache is filled but at the end of the third it becomes empty. And this problem does not appear on Android...

On Android there only are two renders instead of three.

[apollo-cache-persist] Restored cache of size 35420
=========render userLogged==========
Object {
  "__typename": "User",
  "avatar": "muv3zrworf6bg2mcap9o",
  "email": "[email protected]",
  (...)
}
====================================
=========render userLogged==========
Object {
  "__typename": "User",
  "avatar": "muv3zrworf6bg2mcap9o",
  "email": "[email protected]",
  (...)
  },
}
====================================
[apollo-cache-persist] Persisted cache of size 33281

Really strange behavior...

[n1ru4l]

I can confirm this issue on iOS version 10. If I add a console.log in the render method of my component it will log three times. The first two times are with the actual data object and the last on with null.

I am using the following:

    "apollo-cache-inmemory": "1.1.7",
    "apollo-cache-persist": "0.1.1",
    "apollo-client": "2.2.3",
    "apollo-link": "1.1.0",
    "apollo-link-context": "1.0.5",
    "apollo-link-error": "1.0.5",
    "apollo-link-http": "1.3.3",
    "react-native": "0.52.2",

I did not check it on android.

Edit: I have to dig deeper but I think this might be related to queries being fired before the cache has been hydrated (which also fail and return null because the authToken has not been set on the query yet).

Edit 2: It is this ^

[softhib]

I tried to work around by manually restoring the cache but it results in an infinite login logout loop...

userLoggedCacheRestore = async () => {
    const query = gql`
      query UserLoggedInfos {
        userLogged {
          id
        }
      }
    `;
    const { client } = this.props;
    const result = await AsyncStorage.getItem("apollo-cache-persist");
    const cache = JSON.parse(result);
    console.log(
      "=================cache.ROOT_QUERY.userLogged==================="
    );
    console.log(cache[cache.ROOT_QUERY.userLogged.id]);
    if (cache.ROOT_QUERY.userLogged) {
      client.writeQuery({
        query,
        data: {
          userLogged: cache[cache.ROOT_QUERY.userLogged.id]
        }
      });
    }
  };

render() {
    if (this.props.queryUserLoggedInfos.networkStatus === 1) return null;
    const { userLogged } = this.props.queryUserLoggedInfos;
    if (!userLogged) {
      this.userLoggedCacheRestore();
      return <LoginSignupNavigator />;
    }

[n1ru4l]

@softhib I do not know if you have the same issue. For me it worked out to first start rendering components that fire queries after the Promise returned by persistCache resolves.

[softhib]

@n1ru4l Ok ! How did you to that ? Can you write a snippet ?

[softhib]

Thanks a lot @n1ru4l ! I have a little question : where persistCachePromise come from ? Is it a package or something you code yourself ? Because I don't see inside your folder "./apollo-client-setup"

[n1ru4l]

Basically the file exports the promise returned by the function persistCache

[softhib]

Ok understood !

[softhib]

Finally the problem still persists... 😟 Probably not the same issue. I have to investigate what is emptying the userLogged props. In my case, the cache is well restored before the queries being fired. The user is logged just few milliseconds and then is logout by something I don't spot...

[softhib]

I need to know what triggers the third render.

[softhib]

The issue is probably related to apollographql/apollo-client#2920

[jamesreggio]

Sorry to hear about the problem, @softhib.

I think you're right about this being a problem in apollo-client. I can't say for certain, but I think a network error is causing the third render to be null on iOS.

The fact that [apollo-cache-persist] logs about being restored before all of this happens tells me that it's correctly configured. With that being said, @n1ru4l's advice to await the promise returned by persistCache is always a good idea — it ensures that the cache has been restored before you start rendering.

I'm going to close this issue for now, but if you find reason to believe that the problem is actually in apollo-cache-persist, please feel free to reopen.