Sweep: Add Suspense page to documentation

[kevinlu1248]

Issue Description

Suspense:

• this seems like the right umbrella topic to introduce useSuspenseQuery and useBackgroundQuery/useReadQuery (we can elaborate in the page title, but screen real estate is limited in the side bar).
• Sub-topics include:
  • an overview of Suspense/linking to relevant React docs
  • link to Codesandbox that allows us to showcase/contrast uSQ and uBQ+uRQ - we can reproduce parts of it inline, but having a link to working example is useful explain startTransition and how moving Suspense boundaries changes the loading UX an example with @defer (also explain how this directive interacts with fetch policies + Suspense, ie cache-and-network?)
  • link out to hooks API docs
  • link to Spotify demo repo (specific files?)
  • other specific cases we want to call out?
  • thoughts on adding “(experimental)” in the side bar? Suspense itself is still experimental while our hooks will not carry the experimental suffix once out of alpha…

Link to Reproduction

N/A

Reproduction Steps

No response

[sweep-ai[bot]]

Here's the PR! https://github.com/sweepai-dev/apollo-client/pull/6.

💎 Sweep Pro: I used GPT-4 to create this ticket. You have 1054 GPT-4 tickets left.

• Install Sweep Configs: Pull Request

---

Step 1: 🔍 Code Search

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/sweepai-dev/apollo-client/blob/50004385b3a3f99db37390ff723239b43b375ca9/docs/source/api/react/hooks-experimental.mdx#L1-L147 https://github.com/sweepai-dev/apollo-client/blob/50004385b3a3f99db37390ff723239b43b375ca9/ROADMAP.md#L1-L55 https://github.com/sweepai-dev/apollo-client/blob/50004385b3a3f99db37390ff723239b43b375ca9/CONTRIBUTING.md#L3-L81 https://github.com/sweepai-dev/apollo-client/blob/50004385b3a3f99db37390ff723239b43b375ca9/docs/README.md#L1-L9 https://github.com/sweepai-dev/apollo-client/blob/50004385b3a3f99db37390ff723239b43b375ca9/docs/source/local-state/managing-state-with-field-policies.mdx#L280-L398

---

Step 2: 🧐 Snippet Analysis

From looking through the relevant snippets, I decided to make the following modifications:

File Path	Proposed Changes
docs/source/api/react/suspense.mdx	Create this file and add the content for the Suspense documentation page. The content should include an overview of Suspense, explanations and examples of useSuspenseQuery, useBackgroundQuery, and useReadQuery, a section on startTransition, an example with @defer, and links to the Codesandbox and Spotify demo repo.
docs/source/api/react/hooks-experimental.mdx	Add a link to the new Suspense documentation page under the relevant section. The link should be formatted as [Suspense (Experimental)](./suspense.mdx).

---

Step 3: 📝 Planning

I have created a plan for writing the pull request. I am now working my plan and coding the required changes to address this issue. Here is the planned pull request:

Add Suspense page to documentation sweep/add-suspense-page

Description

This PR adds a new documentation page for Suspense under the Apollo Client's React integration section. The page provides an overview of Suspense, introduces the useSuspenseQuery, useBackgroundQuery, and useReadQuery hooks, and includes examples and explanations of related concepts such as startTransition and @defer. It also includes links to a working Codesandbox and the Spotify demo repo.

Changes Made

• Created a new markdown file suspense.mdx in the docs/source/api/react directory.
• Added content for the Suspense documentation page, following the structure and formatting of existing documentation pages.
• Modified the hooks-experimental.mdx file to include a link to the new Suspense documentation page.

Related Issue

Add Suspense page to documentation

Checklist

• [ ] Updated the documentation with the new Suspense page.
• [ ] Added a link to the new Suspense page in the hooks-experimental.mdx file.
• [ ] Checked the formatting and structure of the new page to match existing documentation.
• [ ] Tested the links and examples in the new page to ensure they work correctly.

Screenshots (if applicable)

N/A

---

Step 4: ⌨️ Coding

I have finished coding the issue. I am now reviewing it for completeness.

---

Step 5: 🔁 Code Review

Success! 🚀

---

I'm a bot that handles simple bugs and feature requests but I might make mistakes. Please be kind! ^{Join Our Discord}