Cache management for watchQuery (Angular-Apollo)

Question

I have a problem combining pagination, prefetching, and refetching of data using Apollo with Angular 2. My intended behaviour in the app is that there never should be any difference in data between the server and the client. I want to reduce loading time for the user by prefetching data onmouseover in the menu and have a spinner/loading screen in every component that hides the content until the data has been fetched. If a component already have been visited I want to trigger a refetch instead of a prefetch onmouseover so that the the client matches the server.

Today if I navigate to a component and paginate to, for example, the third page which shows that set of data and after that navigate to another component and then back to the first component again (before fetching of the new data is done) I get the cached data from the third page which trigger the spinner to hide and the wrong dataset to show for one/a couple of seconds before the subscribe gets the "right" data.

My question is: Is there any way to clear/control the cache of a specific query/watchQuery so that I'm always sure to not show cached data in the client?

Deformity

Answer 1

yes, you can pass fetchPolicy option to watchQuery:

• { fetchPolicy: 'cache-first' }: This is the default fetch policy that Apollo Client uses when no fetch policy is specified. First it will try to fulfill the query from the cache. Only if the cache lookup fails will a query be sent to the server.
• { fetchPolicy: 'cache-only' }: With this option, Apollo Client will try to fulfill the query from the cache only. If not all data is available in the cache, an error will be thrown. This is equivalent to the former noFetch.
• { fetchPolicy: 'network-only' }: With this option, Apollo Client will bypass the cache and directly send the query to the server. This is equivalent to the former forceFetch.
• { fetchPolicy: 'cache-and-network' }: With this option, Apollo Client will query the server, but return data from the cache while the server request is pending, and later update the result when the server response has come back.

Racemose

Can you make an example of that? – Stepp

Answer 2

Here is an example using Apollo for Angular as described by @Eitan Frailich:

import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

class AppModule {
    constructor(apollo: Apollo, httpLink: HttpLink) {
        apollo.create({
            link: httpLink.create(),
            cache: new InMemoryCache(),
            defaultOptions: {
            watchQuery: {
                fetchPolicy: 'cache-and-network',
                errorPolicy: 'ignore',
            },
            query: {
                fetchPolicy: 'network-only',
                errorPolicy: 'all',
            },
            mutate: {
                errorPolicy: 'all'
            }
        }
        });
    }
}

Auckland