apollo-client
apollo-client copied to clipboard
ApolloClient 3: Cannot update a component from inside the function body of a different component.
related to https://github.com/apollographql/react-apollo/issues/3863
Intended outcome:
useQuery
should not throw unintentional state changes warning.
Actual outcome:
Error thrown:
Warning: Cannot update a component from inside the function body of a different component.
How to reproduce the issue: probably the same as https://github.com/apollographql/react-apollo/issues/3863#issuecomment-608573622
Versions
"@apollo/client": "^3.0.0-beta.44"
This is similar to the error I get - I believe it's just a different string in React 16.13.1:
Warning: Cannot update a component (
Participants
) while rendering a different component (HandRaiseItem
). To locate the bad setState() call insideHandRaiseItem
, follow the stack trace as described in https://fb.me/setstate-in-render
@hwillson any chance you could fix this here as well?
Is this still an issue for people using the latest @apollo/client@beta
(3.0.0-beta.50)?
Currently on ^3.0.0-beta.48
and i don't have it anymore.
This issue was indeed fixed for me in beta.48
, but seems to have returned in beta.52
. @Banou26 can you check if the latest version produces the error for you again as well?
Tried on ^3.0.0-beta.53
and it's not back.
For some reason npm install '@apollo/[email protected]'
kept installing version 3.0.0-james.33.0
, which is why it was broken again for me. This no longer happens with 3.0.0-beta.53
. Thanks for checking!
I am getting this when using reactiveVars
for pagination in a child component.
I am on @apollo/[email protected]
I have a reactiveVar
:
// file: reactiveVars.ts
export const currentPageVar = makeVar<number>(1)
export const currentDataVar = makeVar<IDataInterface>()
A useQuery
call in my root / parent component:
export default function App() {
const { data } = useQuery(. .......... )
currentDataVar(data)
return (<>
<SomeComponentToRenderData />
<SomeChildComponent />
</>
)
}
And in a child component when a button is pressed the reactive component is updated, which updates my query via a local client only field:
export default function SomeChildComponent() => {
const currentPage = useReactiveVar(currentPageVar)
return <Button onClick={() => currentPageVar(currentPage + 1)}
}
Then my data is updated via the other reactive var
export default function SomeComponentToRenderData() => {
const currenData = useReactiveVar(currentDataVar)
return <ul> .... currentData ..... </li>
}
This pattern for pagination (i.e. using reactive hooks + client schema fields) appears to cause this error to occur.
@coler-j I've just encountered the same issue, and fixed it by adding the reactive var mutation in an effect.
In your case, that would be:
export default function App() {
const { data } = useQuery(. .......... )
useEffect(() => {
currentDataVar(data);
}, [data]);
return (<>
<SomeComponentToRenderData />
<SomeChildComponent />
</>
)
}
@coler-j Same issue of you did you got any solution ?
@asaadawey I have not circled back but I anticipate that this https://github.com/apollographql/apollo-client/issues/6188#issuecomment-796382651 comment should fix it. Although this is not in the docs, effects that impact state should typically be wrapped in useEffect
@coler-j
Thank you for replaying
actually i have got another solution
warpping the code with setTimeout
Should i re-open this issue if it's still a problem?
@Banou26 i think yes
wrapping the apollo code inside a useEffect
or setTimeout
is not an efficient solution
Any update on this issue? Since I started using pagination I have run into this problem. I tried reworking to put the code in side of useEffect instead, but it doesn't seem to make a difference.
@alexistbell I'm not sure if it's exactly the same issue, but I submitted this PR which might fix it: #9801. This change is available in version 3.7.0-beta.6
and newer.
Thanks @dylanwulf , that is making the error go away, which is helpful because it looks like I have a different issue I need to track down that isn't related, so now I can focus on that.