Cache is not updating and new queries are not being displayed

[dwthgs]

The cache gets persisted to the localStorage and it works offline but it never updates when the app gets online.
Once the cache gets persisted nothing will be changed until I clear the persisted cache/data from localStorage but it will only update for only one request and it will be stuck there with the new query data.

So basically what is happening is if there is persisted cached/data the query won't display or persist anything new.

Here is the code:

import React, { Component } from 'react'
import { ApolloClient } from "@wora/apollo-offline";
import { HttpLink } from "apollo-link-http";
import ApolloCache from '@wora/apollo-cache';
import { ApolloProvider } from '@apollo/react-hooks'

import { Query } from '@apollo/react-components';
import gql from 'graphql-tag'

const GET_BOOKS = gql`
{
    books {
        title
        id
    }
}
`



class App extends Component {
  state = {
    isLoading: true,
    client: null
  }

  async componentDidMount() {
    const httpLink = new HttpLink({
      uri: "http://localhost:8000/graphql"
    });

    const client = new ApolloClient({
      link: httpLink,
      cache: new ApolloCache({
        dataIdFromObject: o => o.id
      })
    });
    await client.hydrated()
    this.setState({
      isLoading: false,
      client
    })
  }

  render() {
    if(this.state.isLoading) return <div>Loading...</div>
    return (
      <ApolloProvider client={this.state.client}>
        <Query query={GET_BOOKS}>
          {({ loading, error, data }) => {
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error :(</p>;

            return data.books.map(({ id, title }) => (
                <div key={id}>
                <p>
                    {id}: {title}
                </p>
                </div>
            ));
          }}
        </Query>
      </ApolloProvider>
    )
  }
}

export default App

[morrys]

Hi @dev-newman,
This is the behavior of the apollo inmemory cache with queries that use the default policy (cache-first).
In the next release of apollo client (3.0.0) the problem should be solved with the introduction of the GC, more details in this PR apollographql/apollo-client#5310.

Once the version is officially released it will be supported by wora/apollo-cache.

[dwthgs]

Hi, @morrys
This approach works fine. Just one issue here queries that have been deleted from the server won't be deleted from the persisted cache. I think that is related to GC.
Is there any other approach better than this?

if(navigator.onLine) {
   client.hydrated()
} else {
   await client.hydrated()
}

[morrys]

I did not understand your need ... If your problem is to know the network status you can use the wora/netinfo library from which wora/apollo-offline depends.

https://morrys.github.io/wora/docs/netinfo

[dwthgs]

The problem is when I use this approach nothing will be changed if there is any data persisted

async componentDidMount() {
    const httpLink = new HttpLink({
       uri: "http://localhost:8000/graphql"
     });

    const client = new ApolloClient({
      link: httpLink,
      cache: new ApolloCache({
        dataIdFromObject: o => o.id
      })
    });
    await client.hydrated()
    this.setState({
      isLoading: false,
      client
    })
}

But with this approach, the query is working as expected and gets persisted
and works when offline

async componentDidMount() {
    const httpLink = new HttpLink({ uri: 'http://localhost:8000/graphql' })

    const client = new ApolloClient({
      link: httpLink,
      cache: new ApolloCache({
        dataIdFromObject: o => o.id
      })
    })

    if(navigator.onLine) {
      client.hydrated()
    } else {
      await client.hydrated()
    }

    this.setState({
      client,
      isLoading: false
    })
}

[morrys]

This approach is not correct. It seems to work properly because not waiting for rehydration so the store is still empty when the query is started. This can cause anomalous behavior and inconsistency in the cache.

If your need is to force the execution of the query when the application comes back online you should use the native properties of the apollo queries (notifyOnNetworkStatusChange) and use the network properties to force the query refetch.

More details can be found in the documentation:
https://www.apollographql.com/docs/react/data/queries/#updating-cached-query-results

If you have any problems or think it is better to add some features, please write :)

[dwthgs]

Hi @morrys, Thanks for the help and response. It works well with polling (using poll Interval).
I have one question though, how do we use it with apollo-angular, or Angular in general.

[morrys]

Hi @dev-newman, I would say the same way it is used with react. These libraries extend apollo-client and its cache.

[dwthgs]

Okay, Thanks a lot!