nuxt.js + Apollo Client: How to disable cache?

0
votes

I managed to get an nuxt.js + nest.js with typescript and apollo graphql running. To test if graphql works, i used the files from this example, and added a Button to the nuxt.js-page (on:click -> load all cats via graphql).

Everything works, reading and writing.

The problem is that after doing a mutation via playground or restarting the nest.js server with other graphql-data, the nuxt.js-page is displaying the old data(on click). I have to reload the whole page in the browser, to get the Apollo-Client fetching the new data.

I've tried to add a 'no-cache'-flag and 'network-only'-flag to nuxt.config.ts without success:

apollo: {
defaultOptions: {
  $query: {
    loadingKey: 'loading',
    fetchPolicy: 'no-cache'
  }
},
clientConfigs: {
  default: {
    httpEndpoint: 'http://localhost:4000/graphql',
    wsEndpoint: 'ws://localhost:4000/graphql'
  }
}
}

The function to get the cats:

private getCats() {
this.$apollo.query({ query: GET_CATS_QUERY }).then((res:any) => {
  alert(JSON.stringify(res.data, null, 0));
});
}

How can I disable the cache or is there an other solution?

2
graphqlnuxt.jsapollo-client

2 Answers

7
votes

I had a similar problem recently and managed to fix it by creating a Nuxt plugin which overrides default client's options:

// plugins/apollo-overrides.ts
import { Plugin } from '@nuxt/types';

const apolloOverrides: Plugin = ({ app }) => {
  // disable caching on all the queries
  app.apolloProvider.defaultClient.defaultOptions = {
    query: {
      fetchPolicy: 'no-cache',
    },
  };
};

export default apolloOverrides;

Don't forget to register it in Nuxt's config:

// nuxt.config.js
export default {
  ...

  plugins: [
    '~/plugins/apollo-overrides',
  ],

  ...
};
0
votes

I had problem like this you can fix it easily with remove $ before query

defaultOptions: {
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all'
  }
},

And Reopen your dev server

If this solution not working add fetch policy for each query

.query({
      query: sample,
      variables: {},
      errorPolicy: "all",
      fetchPolicy: "no-cache"
    })