Apollo is not re-sending the query to the server

Question

I build an api-platform app with a graphql endpoint. On client side I manage queries and mutations with apollo client like this(In vuejs front-end):

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

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

export default new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

On my vuex store I use it like this:

fetchItems({commit}, options) {
      commit(mutationsTypes.FETCHING_ITEMS);
      client.query({
        query: organismoQueries.SEARCH_ITEMS_QUERY(options),
      }).then((res) => {
        commit(mutationsTypes.FETCHING_ITEMS_SUCCESS, res.data.organismos.edges)
      }).catch(error => console.error(error));
    }

the query is working ok, the problem is that I can't reload the table results. When I resend the same query with the same options the graphql endpoint is never requested. I need to change the sorting of the table, but once I reach all combinations I'm not able to reload the table again.

I tried to introduce a random parameter in the query but I get an error from the server(obviously).

Is there a way to resend the same query and do something like reload the table.

Thanks in advance!

Answer 1

The Apollo client can resolve a particular query by either fetching it from the server or from the cache. The exact behavior is determined by the fetchPolicy, which can be specified when you call client.query. From the docs:

The fetch policy is an option which allows you to specify how you want your component to interact with the Apollo data cache. By default your component will try to read from the cache first, and if the full data for your query is in the cache then Apollo simply returns the data from the cache. If the full data for your query is not in the cache then Apollo will execute your request using your network interface. By changing this option you can change this behavior.

Because the default policy is cache-first, and you've already fetched your query once, subsequent calls to client.query will return the cached result. To bypass the cache, pick a different policy, like network-only:

client.query({
  query: organismoQueries.SEARCH_ITEMS_QUERY(options),
  fetchPolicy: 'network-only',
})

You can read up more about the fetchPolicy option in the docs.