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: https://github.com/apollographql/apollo-client/pull/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)
}
...
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?
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?
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!
it helped me
if (process.client) {
this.props.startPolling(45000);
}
Closing as no reproduction was provided in one week. Feel free to reopen if you have a minimal reproduction.
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?
Hello @danilobuerger 馃憢,
I just wanted to ask, if you've seen the comment above in the meantime.
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.
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:
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.
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]);
@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 https://github.com/apollographql/apollo-client/issues/3775#issuecomment-440266949 has a very clear reproduction and documentation of the issue.
Most helpful comment
Hi @danilobuerger,
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?