Document new React APIs in 3.9 - Part 1 of 2

[jerelmiller]

Closes #11491
Closes #11493
Closes #11494

Adds new sections to our suspense docs for useLoadableQuery, createQueryPreloader, and useQueryRefHandlers.

NOTE: This only addresses the "guide" part of the documentation. A followup PR to ensure the API documentation for the hook is available (options, return values, etc.). This may require edits to code and will fall in line with the changes in #11381

[changeset-bot]

⚠️ No Changeset found

Latest commit: c236219

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	37.04 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	43.5 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	41.99 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	32.53 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	31.22 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.22 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.2 KB (0%)
import { useQuery } from "dist/react/index.js"	4.27 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.55 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.53 KB (0%)
import { useSubscription } from "dist/react/index.js"	2.23 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.19 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	4.61 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.05 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.13 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.55 KB (0%)
import { useReadQuery } from "dist/react/index.js"	2.99 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	2.93 KB (0%)
import { useFragment } from "dist/react/index.js"	2.17 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.11 KB (0%)

[jerelmiller]

Another point of feedback: Does this section include enough information?

Some other things we could talk about if we want to provide additional info:

• The hook does not take a variables option and instead variables are passed to the loadQuery function.
• The hook exports a reset function that when called, sets the queryRef back to null

This section is also provided right before pagination/refetching, which uses useBackgroundQuery as the example. Should this be moved afterward? Feedback welcome!

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	c236219
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/65b442d9342b70000819b40d
😎 Deploy Preview	https://deploy-preview-11512--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alessbell]

Excited to get these merged 🔥 Added some comments where I'm thinking aloud but overall everything is easy to follow and the examples are a natural extension of the 3.8 docs 🎉 🎉

[alessbell]

I'm going to throw the rest of these in the codesandbox too 👍

[jerelmiller]

Ah yes thank you! Was on my todo, but hadn't got to it yet!