Error when using pollInterval with fetchPolicy cache-and-network

[dmitriy-baltak]

When I'm trying to use fetchPolicy cache-and-network with pollInterval I have next error:
Uncaught Error: Queries that specify the cache-first and cache-only fetchPolicies cannot also be polling queries.
Could be related to this fix: #3372 Since now we reset fetchPolicy to cache-first internally when using cache-and-network.
Would be nice to fix this issue or at least update error message.

Workaround that I use for now:

  ...
  componentDidMount() {
    setTimeout(() => {
      this.props.data.startPolling(1000);
    }, 0)
  }
  ...

[hwillson]

I'm a bit confused here as that error message only shows when the fetch policy is set to cache-first or cache-only. You mentioned you're using a fetch policy of cache-and-network though. Any chance you provide a small runnable reproduction that clearly demonstrates this issue?

[vladshcherbin]

Can confirm this issue, tried adding pollInterval when using cache-and-network and saw this error in console.

I can probably create a reproduction, maybe there is some kind of sandbox/example repo for that?

[OHUSAR]

Hello.

I was also under the impression fetchPolicy: 'cache-and-network' doesn't work with pollInterval: .... However it is working fine, when I try to replicate the bug.

I don't know what is your case, but in my case I had several nested Query components in my app and changing their policy from the default one (cache-first) to cache-and-network did the trick. Sadly, also modified demo with netsted Query components is working. So the root of the problem probably lies somewhere else.

EDIT

Ok. After a while we figured out what was causing our problem. I don't know if its your case, but it is indeed related to #3372.

The problem in our case was that we used both server rendering and client rendering and the prop ssrForceFetchDelay=500 was passed to our "client ApolloClient" instance.

Therefore Apollo internally set disableNetworkFetches to true and consequently the fetchPolicy to cache-only. This was causing the rather confusing error message: Uncaught Error: Queries that specify the cache-first and cache-only fetchPolicies cannot also be polling queries.

Demo:
https://github.com/OHUSAR/react-apollo-error-template

this is the code, that is causing the trouble

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

We tried to solve it by calling startPolling(x) after a timeout (that matched the ssrForceFetchDelay). Such as:

in child component

    componentDidMount() {
        setTimeout(
            () => { this.props.startPolling(45000); },
            600,
        );
    }

But we ran into an another issue, which is that even after the time of ssrForceFetchDelay ends, the Query component doesn't get remounted (I am speaking about React). So we had to remount it manually. Such as:

    componentDidMount() {
        setTimeout(
            () => { this.setState({ pollInterval: 45000 }); },
            600,
        );
    }

    ...
    <Query query={query} pollInterval={this.state.pollInterval}> 
    ....

The fact that Query components doesn't get remounted after the end of the delay should be documented somewhere, but that is a topic for another issue, in another place.

I don't exactly know if this helps you, but I needed to clarify myself.

Good luck!

[kainysheva]

it helped me
if (process.client) { this.props.startPolling(45000); }

[danilobuerger]

Closing as no reproduction was provided in one week. Feel free to reopen if you have a minimal reproduction.

[natterstefan]

Hi @danilobuerger,

Closing as no reproduction was provided in one week.

Sorry, but @OHUSAR did provide a Demo: https://github.com/OHUSAR/react-apollo-error-template. And the demo still shows what's going wrong.

We are still having this issue. Can you take a look at the issue again, please?

[natterstefan]

Hello @danilobuerger 👋,

I just wanted to ask, if you've seen the comment above in the meantime.

[timbset]

I faced with the same problem. Tried to specify both default options and fetchPolicy on query to 'cache-and-network' and even to 'network-only', and I'm still having an issue.

[kirkchris]

This is definitely still an issue in "@apollo/react-hooks": "3.1.3". It'd be great to have it fixed in the library.

In the interim there are two work-arounds:

1. Set ssr: false in your query options and polling will work just fine. The downside here is that this query won't be run or hydrated during your SSR, so that may not be acceptable for all use cases.

2. Implement your own polling as the useQuery return value provides a refetch function. This worked for us:

const { refetch, data, ... } = useQuery(QUERY);
  useEffect(() => {
    const intervalId = setInterval(() => {
      refetch();
    }, INTERVAL_TIME);
    return () => {
      clearInterval(intervalId);
    }
  }, [refetch]);

[zacksinclair]

@danilobuerger This is still an issue and the reproduction case provided in this thread illustrates it. Can you please re-open this issue?

This link #3775 (comment) has a very clear reproduction and documentation of the issue.

[eddivalen]

Hey guys, this worked for me:

mounted(){
      this.$apollo.queries.products.setOptions({
        pollInterval: 60000,
        fetchPolicy: 'no-cache'
      })
},
apollo:{
    products:{
      query: GET_PRODUCTS,
      loadingKey: 'loading',
      errorPolicy: 'all',
      fetchPolicy: 'no-cache',
      watchLoading(isLoading){
        this.loading = isLoading
      },
      variables(){
        return {
          product: this.product,
        }
      },
      pollInterval: 60000,
    },
},