Ensure refetch, fetchMore, and subscribeToMore functions returned by useSuspenseQuery are referentially stable between renders

[jerelmiller]

Currently, the refetch, fetchMore, and subscribeToMore functions exported by useSuspenseQuery are recreated anytime data has changed, causing a rerender. If you were using these functions in useEffect, for example, this could cause that effect to run each time data was updated.

Here is an example taken from the Spotify showcase that demonstrates loading playback state and using a subscription to subscribe to updates to it (with slight variation):

const { data, subscribeToMore } = useSuspenseQuery(PLAYBACK_STATE_QUERY);

useEffect(() => {
  const unsubscribe = subscribeToMore({ 
    document,
    updateQuery: (prev, { subscriptionData }) => { 
      // Update the cache...
    })
  })

  return () => unsubscribe();
}, [subscribeToMore]) // <-- To follow best practice, list subscribeToMore as a dependency

The subscription is fired each time playback state changes on the server, for example the current track's progress. This can happen as often as once a second. Because subscribeToMore is recreated anytime data changes, this meant the effect would re-run every second, constantly toggling between unsubscribing from the subscription and resubscribing.

---

These functions only rely on the observable as part of its implementation, therefore the recreation of the function was unnecessary. This PR ensures these functions are only recreated anytime the observable changes to ensure they remain referentially stable between renders, even when data is updated.

Checklist:

• If this PR contains changes to the library itself (not necessary for e.g. docs updates), please include a changeset (see CONTRIBUTING.md)
• If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
• Make sure all of the significant new logic is covered by tests

[changeset-bot]

🦋 Changeset detected

Latest commit: 8f2e70a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@apollo/client	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alessbell]

🙌