My page / page level query is rendered SSR. I have a below the fold component on my page that is not SSR (has a component level useQuery hook with the
ssr: false option). It accepts an
itemId prop that is handed down from the page level query’s results. The
itemId prop is used as a variable in the component level query.
When a mutation is triggered on click from another part of the page, I update an attribute on the Item shape (with cache ID
Item:[id]) via an update function passed to the useMutation API. This causes the above error in the not SSR component. It looks like
onNewData is triggering a re-render and it’s bubbling down to the component, which is evidently unmounted. This is causing my page to momentarily 404.
Any idea on how to fix? It looks like I want the non-SSR component to ignore the onNewData re-render when my component is unmounted. This is actually happening in a couple below the fold, non-SSR components so I’m hoping there is a reusable solution out there. Thanks in advance!
Full stack trace
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in NotSSRComponent (at Container.tsx:78) in div (at Container.tsx:74) in Container (at SSRSection.tsx:57) in div (at SSRSection.tsx:56) in div (created by On) react-dom.development.js:88 React 5 onNewData useBaseQuery.js:18 next QueryData.js:224 notifySubscription Observable.js:135 onNotify Observable.js:179 next Observable.js:235 iterateObserversSafely iteration.js:4 iterateObserversSafely iteration.js:4 next ObservableQuery.js:21 observe ObservableQuery.js:320 oqListener QueryInfo.js:100 notify QueryInfo.js:115 notify QueryInfo.js:115 broadcastQueries QueryManager.js:447 broadcastQueries QueryManager.js:447 mutate QueryManager.js:80 step tslib.es6.js:100 verb tslib.es6.js:81 __awaiter tslib.es6.js:74 __awaiter tslib.es6.js:70 mutate QueryManager.js:47 mutate ApolloClient.js:131 mutate MutationData.js:48 runMutation MutationData.js:16 onClick MyMutationHelper.tsx:64 jn index.js:1 onClick index.js:1 onClick index.js:1 React 17 unstable_runWithPriority scheduler.development.js:653 React 24 renderReactElement index.tsx:499 doRender index.tsx:754 _callee2$ index.tsx:394 Babel 8 render index.js:484 <anonymous> next-dev.js:85 displayContent fouc.js:14 (Async: FrameRequestCallback) displayContent fouc.js:5 <anonymous> next-dev.js:84 (Async: promise callback) <anonymous> next-dev.js:31 <anonymous> next-dev.js:155 NextJS 6