Incrementally re-render results after refetch or skip when using @defer with useSuspenseQuery

[jerelmiller]

Closes #10679

When issuing a query with an @defer directive, calling refetch or enabling a query by disabling the skip option would only re-render when the entire result was loaded. This felt like it defeated the purpose of the @defer directive in these cases.

This PR adds the ability to incrementally re-render results returned by @defer queries to match the behavior of the initial fetch.

This PR also makes a first attempt at refactoring some of QueryReference to remove flag-based state and replace it with a status enum.

NOTE: This PR attempts to add support for this for fetchMore, but there is currently a bug in core that prevents this from happening. There is a test that documents the existing behavior for completeness.

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: c2c0c35

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

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	36.99 KB (+0.06% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	43.58 KB (+0.07% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	42.2 KB (+0.1% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	32.57 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	31.43 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.23 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.22 KB (0%)
import { useQuery } from "dist/react/index.js"	4.26 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.08 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	4.58 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.39 KB (0%)
import { useMutation } from "dist/react/index.js"	2.5 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.48 KB (0%)
import { useSubscription } from "dist/react/index.js"	2.24 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.2 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	3.63 KB (+0.09% 🔺)
import { useSuspenseQuery } from "dist/react/index.js" (production)	3.05 KB (+0.07% 🔺)
import { useBackgroundQuery } from "dist/react/index.js"	3.87 KB (+1.08% 🔺)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.31 KB (+1.47% 🔺)
import { useReadQuery } from "dist/react/index.js"	2.61 KB (+1.8% 🔺)
import { useReadQuery } from "dist/react/index.js" (production)	2.58 KB (+1.74% 🔺)
import { useFragment } from "dist/react/index.js"	2.05 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2 KB (0%)

[phryneas]

The changes themselves look good to me.

Personally, I have to say that tap makes the code harder for me to read - especially since the "tapping" part of tap is used nowhere, so it's more of a returnWithCleanup function.

I've checked the bundle sizes, and if we would just go back to the normal behavior of

const val = something()
somethingElse()
return something()

there would not be any relevant bundle difference:
apollo-client.min.cjs goes up by 10 bytes,
dist/main.cjs stays the same
only importing one of useBackgroundQuery or useSuspenseQuery even goes down by a few bytes.

=> If you are okay with it, could we keep things simple here?

[phryneas]

For the next PR: I believe without the tap calls, this bind call is unneccessary now.