This seems to only happen for cache hits.

What happens here is that we get the cache hit & start a rerender before the ref for the callback can be updated in a useEffect.

I'm trying this with a useLayoutEffect instead, but if that doesn't work I don't think we can do anything - we cannot update these callbacks during render as the render might never commit due to a parallel component suspend and the callbacks would refer to a "ghost render" then.

It comes down to: we need to deprecate and remove these callbacks at some point.
They have tons of interpretation problems like "should a cache hit trigger onCompleted? Should an update of the cache from another component trigger it?" and now this.

It seems my attempted fix in #12319 works in your replication.

Could you please try it in your app and report back?

npm i https://pkg.pr.new/@apollo/client@12319

I updated my package.json to be "@apollo/client": "https://pkg.pr.new/@apollo/client@12319", since Repl, where I'm testing, doesn't allow me to directly run that NPM command.

I see the same bug.

That is weird - I did the same and it disappeared for me.

That said, I believe that is all we can do from our side to try and fix this - I'll check in with my colleagues tomorrow, but I don't see a good way forward here - we are bound by React's limitations for this one and breaking those would mean bugs in other cases. React unfortunately invites those "stale reference" situations.

I would ultimately recommend you to migrate off the onCompleted callback - we will deprecate that soon, for a lot of reasons I already laid out in my previous comment.

Here's also a blog article why React Query removed these callbacks - we share a lot of their concerns by now.

I would ultimately recommend you to migrate off the onCompleted callback - we will deprecate that soon, for a lot of reasons I already laid out in my previous comment.

This is ultimately what we've already done, but the workaround I found also required moving off of useQuery to instead a useEffect with a client.query inside of it.

Our actual pattern was:

useQuery(..., {
    onCompleted: (data) => {
        setExternalStore(transformData(data));
    }
);

This ensured we only updated our store when it was required, and not every time the hook ran. (Yes, we're dealing with cache hits, but if the variables don't change between renders, then onCompleted is not called).

What I wouldn't want is

const { data } = useQuery(...)
setExternalStore(transformData(data));

because that will cause extra re-renders every time the hook runs, since the transformation creates a new object.

Why not

const { data } = useQuery(...)
useEffect(() => {
  setExternalStore(transformData(data));
}, [data])

synchronizing with external systems is pretty much exactly what useEffect is made for.