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"

[asaadawey]

@Banou26 i think yes

wrapping the apollo code inside a useEffect or setTimeout is not an efficient solution

[coler-j]

I am getting this when using reactiveVars for pagination in a child component.

I am on @apollo/client@3.2.5

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.