Add TypeScript examples to all subscriptions page code blocks

[jerelmiller]

Closes #10184

Adds TypeScript examples to all code blocks on the subscriptions page. You'll note that some <MultiCodeBlock /> components only specify TS and others specify both. The ones that only specify TS will compile and add a JS block as well, but I found some bugs in some places with formatting and spacing so some code blocks specify both TS and JS code blocks to avoid the auto-compilation.

This change assumes that we want TypedDocumentNode as the predominant pattern for declaring types on query documents. The original issue mentions using the generic argument syntax for subscribeToMore, but I left that out in favor of the typed document node instead.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2798024

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	39.22 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	47.88 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	45.45 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	34.31 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	32.2 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.26 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.24 KB (0%)
import { useQuery } from "dist/react/index.js"	5.21 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.3 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.69 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.77 KB (0%)
import { useMutation } from "dist/react/index.js"	3.62 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.84 KB (0%)
import { useSubscription } from "dist/react/index.js"	4.41 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	3.46 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.49 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.15 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.99 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.64 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.07 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.72 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.39 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	3.33 KB (0%)
import { useFragment } from "dist/react/index.js"	2.32 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.27 KB (0%)

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	e741899
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/66a295971668a40008f4a5fb
😎 Deploy Preview	https://deploy-preview-11977--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.

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	e741899
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/66a296d5d948750008d47060
😎 Deploy Preview	https://deploy-preview-11977--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.

[phryneas]

It's a bit sad that we don't seem to have graphql code highlighting in .ts mode. Not that this PR would change anything, just wanted to mention it.

[jerelmiller]

I agree. Would love to dig into this further if I have some time.

[phryneas]

Irritatingly, here the transpiled-to-js gql tag also doesn't have syntax highlighting, while the manual js block above does... maybe worth investigating?

[phryneas]

Looks good!