apollo-client: ApolloClient 3: Cannot update a component from inside the function body of a different component.

@Banou26 i think yes

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

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.

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.

@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 />
   </>
  )
}