Apollo-client: Apollo client's cache is crashing the browser

[2Fwebd]

Intended outcome:
I have one query which is used by a dozen sub components but always with different variables. Therefore, caching does not make sense as it's always different. That is why I added to all queries:

fetchPolicy: 'network-only',

The expectation is to not store anything into the cache as those queries are always different.

Actual outcome:

Problem is that the results are cached regardless of the fetchPolicy option, so if I reload my components a few times the cache is getting HUGE, hundreds of rows.

Therefore the first requests are really fast but the more times they are reloader (re mounted), the slower are the components rendering:

It goes up to 20 seconds per component then kills the app.

After a lot of tests I am 100% positive that this "blue delay" (Content loading) is caused by Apollo storing / accessing its cache.

I am seeing all the data being added by running:

     console.log(this.$apollo.provider.defaultClient.readQuery({
             query:REPORTS_QUERY
      }));

So my question is how can I completely deactivate the cache for those queries. Asking Apollo to just look for the network response without interaction with the cache.

How to reproduce the issue:
Just use a query with a different param so it adds a new row in the cache. You can use a timestamp based on new Date() so it will change on every request. The more requests you will make, the slower you will be able to access the data.

Version

• [email protected]

Let me know if I can provide any more detail.

[jbaxleyiii]

@2Fwebd that fetchPolicy bypasses the cache for the initial request, but then stores it in the cache so that it can be read back later.

I have tossed around the idea of fetchPolicy: 'raw' which never touches the cache which may work for you in this case.

I'd also like to figure out how to make this not crash your app when using the cache. Can you create a reproduction of this so I can improve the cache?

[2Fwebd]

Hello @jbaxleyiii,

Thanks, yes that would be perfect! 👍

Well, I think as the queries are always different, the only way to not crash the app would be to limit the cache store's size. For a given query type, like query:REPORTS_QUERY, I mean gql query.

So you cache like 5-10 results so the cache is not filled with 100s of records regarding the same gql.

[tnrich]

@jbaxleyiii I believe I am also running into issues due to the fact that "fetchPolicy bypasses the cache for the initial request, but then stores it in the cache so that it can be read back later."

The name "network-only" definitely makes it seem like things shouldn't be getting cached.

[2Fwebd]

Hey @jbaxleyiii,

Quick question, is there any ETA on that?

Many thanks

[tylerjbainbridge]

We are also having issues with the cache growing too large and killing performance- would love an option to completely disable the cache for a query.

[rpavez]

Any ETA?

[crumhorn]

Same with us. Caching in our app makes almost no sense as every query will have different parameters given to it. In fact, we've had so many issues with caching that it's off on all queries now, and having the cache do "work" for those is sadly overkill. A "raw" option would be fantastic.

[hwillson]

A no-cache FetchPolicy was added in version 2.2.2.

no-cache: return result from network, fail if network call doesn't succeed, don't save to cache

Hopefully this helps - thanks!