React-apollo: useQuery ignores fetchPolicy='no-cache' or 'network-only' for @client query

[jBugman]

Intended outcome:

@client query with fetchPolicy no-cache or network-only should always hit local resolver.

Actual outcome:

Resolver is only called once, all subsequent requests are cached.

How to reproduce the issue:

query isLoggedInQuery {
  isLoggedIn @client
}


const resolvers = {
  Query: {
    isLoggedIn: ...


useQuery(isLoggedInQuery, {fetchPolicy: 'cache-only'});

Version

@apollo/react-hooks beta 10, 12

apollo-cache-inmemory: ^1.6.2 => 1.6.2
apollo-client: ^2.6.3 => 2.6.3
apollo-link-error: ^1.1.11 => 1.1.11
apollo-link-http: ^1.5.15 => 1.5.15
apollo-link-ws: ^1.0.18 => 1.0.18

[bugzpodder]

Same as https://github.com/apollographql/react-apollo/issues/3302#event-2534892099 ?

[jBugman]

It looks similar, but it is actually not, I'm not trying to run two concurrent ('in flight' as linked docs) queries.
I run query once per each page visit, and on subsequent requests I get cached result, which, I would argue, is totally unexpected.
Not sure if queryDeduplication should even apply in that case, and if it is it may be a problem with docs.

[hwillson]

@jBugman any chance you can provide a small runnable reproduction that demonstrates this? Also, I'm curious to know if using @client(always: true) helps.

[jBugman]

@hwillson I sketched quick example https://codesandbox.io/s/usequery-client-no-cache-vpw6d
Interestingly query in there hits resolver every time with no-cache, but actually returns no data (in contrast with my local case). Most likely I've done something wrong while extracting meaningful parts, but I'm not sure what.
Btw, in my local case @client(always: true) didn't help either. Looks like there is something subtly wrong with my setup and I need to investigate more.

[adrianescat]

It happens to me too. fetchPolicy: "network-only" is not working using useQuery

"@apollo/react-hooks": "3.1.3",

[vandercloak]

Has anyone found a solution to this?

[noumanniazi]

@jBugman were you able to fix the issue? Can you share your solution?

[jBugman]

No, we actually stopped using Apollo altogether due to this and some other issues.

[vandercloak]

@noumanniazi @jBugman @bugzpodder We were able to disable caching by modifying the way we initialized the dataSources.

Previously our dataSources look like this:

const dataSources: DataSources = {
    authAPI: new AuthAPI(),
    orderAPI: new OrderAPI(),
}

And then we changed dataSources from an object to a function:

const dataSources = (): DataSources => ({
    authAPI: new AuthAPI(),
    orderAPI: new OrderAPI(),
    reportsAPI: new ReportsAPI(),
})

Then we changed the ApolloServer from:

const server = new ApolloServer({
    ...
    dataSources: () => dataSources,
    ...
})

And changed it to:

const server = new ApolloServer({
    ...
    dataSources: () => dataSources(),
    ...
})

That did the trick for us. Hope that works for you!

This was the source of the discovery: https://github.com/apollographql/apollo-server/issues/1562

[noumanniazi]

@vandercloak thanks for the response, actually we end up solving this issue by passing refetch in callback with data.
When query input is changed where it wasn't sending a new network request we called refetch and it forcefully sent a new network call. It is an extra render but it works.

I will try your way as well. This seems like better solution.

[AdamZaczek]

I have this issue as well :/ It's a huge blocker and I'm surprised there's so little discussion about it.

[vandercloak]

I have this issue as well :/ It's a huge blocker and I'm surprised there's so little discussion about it.

@AdamZaczek Yeah not a fun issue. Did the solution I mention above not work for you? Curious if it is not a catch all solution.

https://github.com/apollographql/react-apollo/issues/3315#issuecomment-575187905

[AdamZaczek]

@vandercloak Actually, I made a silly mistake and a simple 'network-only' works for us!
We are making several queries on app init and I didn't notice that one higher-order function was called one time too little.

Your solution looks like a universal one, it should always work due to returning new instances each time.

[avoltis]

using refetch with random variable ts: new Date().getTime() will force it to query from server, but its extra render

[llamerr]

ts: new Date().getTime()

Same problem with useLazyQuery. It was ignoring both network-only and no-cache unless I provide random variable

[jdbence]

Below is something similar to what I have working.

// hook setup
const [
  getAssets,
  { data, refetch },
] = useLazyQuery(GET_ASSETS, { fetchPolicy: 'cache-and-network' });

// original GET request
getAssets({
  variables: {
    assets: slug,
  },
});

// on button click or change of value
refetch({
  assets: slug,
})