How to disable cache in apollo-link or apollo-client?

Question

I'm using apollo-client, apollo-link and react-apollo, I want to fully disable cache, but don't know how to do it.

I read the source of apollo-cache-inmemory, it has a config argument in its constructor, but I can't build a dummy storeFactory to make it works.

Checkout [fetchPolicy](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy) and set it to `network-only`. — Robin Wieruch, Feb 01 '18 at 19:19

score 156 · Accepted Answer · edited Aug 24 '21 at 01:14

156

You can set defaultOptions to your client like this:

const defaultOptions: DefaultOptions = {
      watchQuery: {
        fetchPolicy: 'no-cache',
        errorPolicy: 'ignore',
      },
      query: {
        fetchPolicy: 'no-cache',
        errorPolicy: 'all',
      },
    }

const client = new ApolloClient({
    link: concat(authMiddleware, httpLink),
    cache: new InMemoryCache(),
    defaultOptions: defaultOptions,

});

fetchPolicy as no-cache avoids using the cache.

See https://www.apollographql.com/docs/react/api/core/ApolloClient/#defaultoptions

edited Aug 24 '21 at 01:14

Omar Dulaimi

541
6
24

answered Jan 31 '18 at 19:06

Irvin Chan

2,217
2
14
20

Where can I find document for this option? – Nicolas S.Xu May 14 '18 at 15:50
you can find it here: https://www.apollographql.com/docs/react/api/apollo-client.html – Irvin Chan May 14 '18 at 21:02
Is this working for you? I have a query called `getRandom` and i'm trying to call it 5 times to get 5 random things, but all of them end up being the same. I have an array of queries (which are essentially all the same) that I'm mapping to get multiple `Query` components, but all the data is identical. – Brian Glaz May 17 '18 at 04:47
1

Read @duske's answer, it's correct. I don't know why this is married correct, it shouldn't be. Docs: https://www.apollographql.com/docs/react/advanced/caching.html#ignore – BrewMate Mar 14 '19 at 01:30
2

I think in almost all use cases it is probably better to disable the cache ONLY on some queries. @Anuj answer below is probably a better solution. – Elemental Jul 10 '19 at 09:31
1

Not sure why this is marked as a correct answer since it is NOT working. DefaultOptions is not working in Apollo for a very long time and it is still not fixed. – paradox37 Mar 27 '20 at 13:19
@IrvinChan how long apollo client save the response in caching ? – Ajay S Aug 20 '20 at 07:18
2

Worked very well. Thanks – Saeed Afzal Jan 13 '21 at 09:21
very happy to help you guys – Irvin Chan Jan 13 '21 at 18:33
Works great with apollo 3. Thank you! – Omar Dulaimi Aug 21 '21 at 10:38

score 48 · Answer 2 · edited Oct 08 '20 at 14:39

48

Actually, setting fetchPolicy to network-only still saves the response to the cache for later use, bypassing the reading and forcing a network request.

If you really want to disable the cache, read and write, use no-cache. Which is "similar to network-only, except the query's result is not stored in the cache."

Take a look at the official docs: https://www.apollographql.com/docs/react/data/queries/#configuring-fetch-logic

edited Oct 08 '20 at 14:39

Bruno Peres

2,583
1
19
18

answered Sep 05 '18 at 07:27

duske

654
6
7

17

It says page not found. – Suleman Nov 30 '19 at 15:42
2

how long apollo client save the response in caching ? – Ajay S Aug 20 '20 at 07:18

score 33 · Answer 3 · answered Jun 06 '19 at 18:46

33

I would always suggest not to disable inbuild caching feature from apollo client. Instead you can always set fetchPolicy: 'network-only' for an individual queries. Something like this

<Query
    query={GET_DOG_PHOTO}
    variables={{ breed }}
    fetchPolicy='network-only'
>
 {({ loading, error, data, refetch, networkStatus }) => {
   ...
 }}
</Query>

While fetching data with this Query, it would always do a network request instead of reading from cache first.

answered Jun 06 '19 at 18:46

Anuj

851
8
19

6

Could it be possible to know why it is not recommended to disable Apollo client's cache? – Strider Oct 25 '19 at 21:10
3

solution I was working on in some edge cases with "fetchPolicy: 'network-only'" was still storing data in cache, and in concurrent cases was not showing the latest data, which was not what users wanted. It depends on the case, but my personal recommendation is 'no-cache' if you want to display the latest state from server all the time. It could be set per individual request or per whole client. – domingo Mar 01 '20 at 23:03
Sometimes its usefull to reset apollo cache: const client = useApolloClient(); someHandler =()=>{ client.resetStore(); } – northernwind Aug 02 '21 at 09:29

How to disable cache in apollo-link or apollo-client?

3 Answers3

Linked