Add component for API members that are marked as alpha/beta

[jerelmiller]

Adds a component to our documentation components that will show features marked as alpha/beta with the <ExperimentalFeature /> component exported by the docs repo.

(NOTE: These screenshots are not of real alpha/beta features. I added some for testing this change)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2cad5c3

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	38.24 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	46.04 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	43.59 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	33.96 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	31.89 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.24 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.22 KB (0%)
import { useQuery } from "dist/react/index.js"	5.2 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.27 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.51 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.58 KB (0%)
import { useMutation } from "dist/react/index.js"	3.51 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.73 KB (0%)
import { useSubscription } from "dist/react/index.js"	3.19 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.38 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.29 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	3.94 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.76 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.4 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	4.97 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.63 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.04 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	2.98 KB (0%)
import { useFragment } from "dist/react/index.js"	2.19 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.13 KB (0%)

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	2cad5c3
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/65b4415476e3610009247eed
😎 Deploy Preview	https://deploy-preview-11529--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]

I imagine there may not be a(n easy) way around it, but there have been so many times I've accidentally wound up on the prod docs at some point while browsing a preview and didn't realize it which gets so confusing. If there's a way to avoid the absolute URL here that would be amazing 🙏

[jerelmiller]

Ya let me see what I can do!

[jerelmiller]

Going to hit this in a followup PR. FWIW we used this exact link in our docs prior to 3.8. There's a chance apollographql/docs#719 might fix this as well 🙂

[alessbell]

Sounds a bit scary but is definitely the more efficient way to get the point across :)

[jerelmiller]

Ya I wish we could add messages to the alpha/beta tags in the doc blocks, but unfortunately not, so this was as generic as I could make it to try and cover everything. Oh well 😅