useQuery `pollInterval` stop working in React v18 StrictMode

[pobch]

Intended outcome: pollInterval should work either with React v18 StrictMode or without StrictMode

Actual outcome: pollInterval stop working when using it with React v18 StrictMode

How to reproduce the issue:

1. Go to https://codesandbox.io/s/heuristic-bohr-df8gf9?file=/src/index.js
2. Open the dev tools, go to network tab
3. BUG: There is no new request to the graphql endpoint even though the pollingInterval is set to 2000
4. If you remove <React.StrictMode> in index.js file, the polling will work as expected.

[cdnicoll]

+1 Seeing the same issue and confirmed that step 4 worked, but not an ideal solution

[boyerst]

Experiencing this as well. Manually triggering the poll via startPolling is a workaround

[bentron2000]

I am experiencing this as well.

[martentamm]

Same here!

[gaswirth]

+1!

[vedmakk]

Experiencing the same.

[Maxou44]

Same here 🥲

[Zonalds]

Same here, I have to pass refetch around. Any idea if this will be fixed soon?

[thiagokpelo]

Same here too! 😢

[angelhodar]

Same, in my case its not working even if i call startPolling manually in useEffect. I have also set reactStrictMode to false in next.config.js and it doesnt solve the issue

[thiagokpelo]

If I set reactStrictMode to false in next.config.js, it works. And the workaround with startPolling and stopPolling also works.

[angelhodar]

@thiagokpelo Mmmm then i dont understand why it doesnt work in my case. I should try a minimal reproduction example. Thanks for telling me!!

[thiagokpelo]

@angelhodar will update us here if it resolves. If I can help just say! 👊

[angelhodar]

@thiagokpelo I dont know what i am doing wrong but with a fresh nextjs project and the last version of apollo client i cant get the poll interval to work. What versions did you use to debug your nextjs project? I have tried to manually poll with startPolling and disable reactStrictMode to false and still doesnt work

[jpmermoz]

Same issue here. Next js with strict mode disabled and still not working

[thiagokpelo]

@angelhodar I'm using

 "dependencies": {
    "@apollo/client": "^3.7.0",
    "@chakra-ui/react": "^2.3.5",
    "@datadog/browser-logs": "^4.21.2",
    "@datadog/browser-rum": "^4.21.2",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@react-oauth/google": "^0.2.8",
    "apollo-link-rest": "^0.9.0-rc.1",
    "framer-motion": "^6",
    "graphql": "^16.6.0",
    "graphql-ws": "^5.11.2",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intl": "^6.1.2"
  }

Have you tried to run the built project and with npm start?

[siegfried]

Same issue here. Maybe it is dedicated to local Nextjs server yarn dev, because my app on Vercel seems fine. Manually startPolling works too.

[jurgelenas]

We are experiencing the same issue at https://github.com/ExpressLRS/ExpressLRS-Configurator

[MrDesjardins]

I had the same issue using @apollo/client:3.7.1 and this new 3.7.2 version using CRA (React version 18.0.0).

Using a timer fixed the issue temporary.

Example of the fix:

const { refetch } = useMyEntity({
    onCompleted(data) {
       // Snip
    });
   // snip
   useEffect(() => {
    const refetchQueryInterval = setInterval(() => {
      refetch();
    }, 5000;
    return () => clearInterval(refetchQueryInterval);
});

[afonsomatos]

I stumbled in this issue as well. Specially with Next.JS since it enables strict mode by default (go to next.config.js and turn the flag off).

[IShinkarenko]

The same issue with Next.js 13.0.0 I set reactStrictMode to false but that does not help

[afonsomatos]

@IShinkarenko You probably did that but make sure you restart (shutdown and start) the Next.JS server. Changing next.config.js won't have an effect on an ongoing instance, even if started with next dev.

[ramblehead]

Similar issue with @apollo/client@^3.7.3 and [email protected] (just updated) next start works as expected; next dev fails to start polling.

Using the following temp fix as others have suggested:

const {
  data: indexQuery,
  error: indexError,
  startPolling,
} = useQuery(IndexDocument, {
  ssr: false,
  // The following line is removed
  // pollInterval: 500,
});

// The following useEffect is added
useEffect(() => {
  startPolling(500);
}, [startPolling]);

[MarkAPhillips]

I tried version 3.7.4 but this seems to still be an issue - is they any idea as when this will be fixed ?

[mysticek]

[email protected] and @apollo/[email protected] , still not working, any news? for me is not working with useQuery, useLazyQuery, with reactStrictMode: false in next.config.js - next start / next dev same result

[patrick91]

@mysticek I think this is closely related to https://github.com/apollographql/apollo-client/issues/10540#issuecomment-1456300209 the workaround suggested there worked for polling too (which is similar to what @ramblehead did)

Hopefully, we find a good way to fix this soon 😊

[phryneas]

This is fixed in #10629 and will hopefully land in the next patch release.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.