fetchPolicy: 'network-only' not working on client.query({...}) when 'ssrMode': true set on ApolloClient.

[kapilpipaliya]

fetchPolicy: 'network-only' not working on client.query({...})

[dennislaupman]

Facing weird problems. It seems that client is still reading from cach, after that the network is storing the data in the cache. What means that you always one step behind.

[fc]

In apollo-client 2.2.2, a fetchPolicy of 'no-cache' was added which may fix this issue.

#2934

[dennislaupman]

const getDetails = graphql(DetailsViewQuery, {
options: ( props ) => {
return {
variables: { id: props.navigation.state.params._id },
fetchPolicy: 'network-only', // skip the cache
}
}
});

Still gives cached results in React Native

[hwillson]

The original issue here

fetchPolicy: 'network-only' not working on client.query({...}) when 'ssrMode': true set on ApolloClient.

actually functions as designed:

apollo-client/packages/apollo-client/src/ApolloClient.ts

Lines 239 to 241 in ca5a211

	if (this.disableNetworkFetches && options.fetchPolicy === 'network-only') {
	options = { ...options, fetchPolicy: 'cache-first' } as WatchQueryOptions;
	}

Setting ssrMode to true effectively sets disableNetworkFetches to true, which means your fetchPolicy is being changed to cache-first. You can read more about why this is happening in the Server-side rendering > Server initialization section of the apollo-client docs. In a nutshell - network-only is overkill with SSR, since we really only ever want to fetch each query result once. Closing for now - thanks!

[sea129]

@hwillson with ssrMode: true and Query component in react-apollo, fetchPolicy 'network-only' returns cached value https://github.com/apollographql/react-apollo/issues/556

which means if ssrMode is true, all queries return cached data, even set ssr={false} on Query component

[hwillson]

Thanks @sea129 - apollographql/react-apollo#556 is still open, so we'll get to it shortly.

[duwerq]

@kapilpipaliya I had issues with client.query also. I solved it by chanaging:

  const { data: { getUser } } = await client.query({
        query: gql(queries.getUser)
      }, {
        options: {
          fetchPolicy: 'network-only'
        }
      });

to

const { data: { getUser } } = await client.query({
    query: gql(queries.getUser),
    fetchPolicy: 'network-only'
});

If dig into the code, you can see the all params passed into client.readQuery() after the gql query are treated as one object. Hence it looks for options.fetchPolicy instead of options.options.fetchPolicy

[jack1012t]

thank you @duwerq

[spyshower]

Thank you so much @duwerq !

[hmmhmmhm]

thank you. you saved me at dawn. @duwerq

[lilrooness]

Where is the use of client.query documented? It seems like we're all just debating the spec of the function here

Also thank you @duwerq you saved me many hours of trial and error

[raajnadar]

I used this config now the data is not cached. In my react native application.

export default new ApolloClient({
    ...
    defaultOptions: {
        watchQuery: {
            fetchPolicy: 'no-cache'
        },
       query: {
            fetchPolicy: 'no-cache'
       },
       mutate: {
            fetchPolicy: 'no-cache'
        }
    }
})

[Aarthysekar]

For me, in graphql() HOC, when i changed the options to functions it worked. Its weird, but worked.

graphql(SAMPLE_DATA_GQL, {
name: 'sampleData',
options: () => ({
fetchPolicy: 'network-only'
})
})