Skip to content

Misc get started tweaks and more robust useLazyQuery documentation - #12833

Merged
jerelmiller merged 21 commits into
release-4.0from
jerel/get-started-doc
Aug 8, 2025
Merged

Misc get started tweaks and more robust useLazyQuery documentation#12833
jerelmiller merged 21 commits into
release-4.0from
jerel/get-started-doc

Conversation

@jerelmiller

Copy link
Copy Markdown
Member

Most of the work in this PR makes the documentation for useLazyQuery much more robust. Previously the section included a paragraph and a single example for using it. I've instead framed the hook as a way to execute queries in response to user interaction. I've also added more subsections that describe the capabilities of useLazyQuery much more in depth.

I also tweaks a couple things in the get started guide for accuracy.

@jerelmiller
jerelmiller requested a review from phryneas August 6, 2025 23:57
@jerelmiller
jerelmiller requested a review from a team as a code owner August 6, 2025 23:57
@changeset-bot

changeset-bot Bot commented Aug 6, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: bd78991

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

@apollo-librarian

apollo-librarian Bot commented Aug 6, 2025

Copy link
Copy Markdown
Contributor

✅ Docs preview ready

The preview is ready to be viewed. View the preview

File Changes

26 new, 66 changed, 5 removed
+ (developer-tools)/react/(latest)/api/link/apollo-link-base-batch-http.mdx
+ (developer-tools)/react/(latest)/api/link/apollo-link-base-http.mdx
+ (developer-tools)/react/(latest)/api/link/apollo-link-batch.mdx
+ (developer-tools)/react/(latest)/api/link/apollo-link-client-awareness.mdx
+ (developer-tools)/react/(latest)/api/link/apollo-link.mdx
+ (developer-tools)/react/(latest)/api/react/ApolloProvider.mdx
+ (developer-tools)/react/(latest)/api/react/skipToken.mdx
+ (developer-tools)/react/(latest)/api/react/useApolloClient.mdx
+ (developer-tools)/react/(latest)/api/react/useBackgroundQuery.mdx
+ (developer-tools)/react/(latest)/api/react/useFragment.mdx
+ (developer-tools)/react/(latest)/api/react/useLazyQuery.mdx
+ (developer-tools)/react/(latest)/api/react/useLoadableQuery.mdx
+ (developer-tools)/react/(latest)/api/react/useMutation.mdx
+ (developer-tools)/react/(latest)/api/react/useQuery.mdx
+ (developer-tools)/react/(latest)/api/react/useQueryRefHandlers.mdx
+ (developer-tools)/react/(latest)/api/react/useReactiveVar.mdx
+ (developer-tools)/react/(latest)/api/react/useReadQuery.mdx
+ (developer-tools)/react/(latest)/api/react/useSubscription.mdx
+ (developer-tools)/react/(latest)/api/react/useSuspenseQuery.mdx
+ (developer-tools)/react/(latest)/api/errors/CombinedGraphQLErrors.mdx
+ (developer-tools)/react/(latest)/api/errors/CombinedProtocolErrors.mdx
+ (developer-tools)/react/(latest)/api/errors/LinkError.mdx
+ (developer-tools)/react/(latest)/api/errors/LocalStateError.mdx
+ (developer-tools)/react/(latest)/api/errors/ServerError.mdx
+ (developer-tools)/react/(latest)/api/errors/ServerParseError.mdx
+ (developer-tools)/react/(latest)/api/errors/UnconventionalError.mdx
* (developer-tools)/react/(latest)/get-started.mdx
* (developer-tools)/react/(latest)/index.mdx
* (developer-tools)/react/(latest)/why-apollo.mdx
* (developer-tools)/react/(latest)/api/cache/InMemoryCache.mdx
* (developer-tools)/react/(latest)/api/core/ApolloClient.mdx
* (developer-tools)/react/(latest)/api/core/ObservableQuery.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-batch-http.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-context.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-error.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-http.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-remove-typename.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-retry.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-schema.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-subscriptions.mdx
* (developer-tools)/react/(latest)/api/link/apollo-link-ws.mdx
* (developer-tools)/react/(latest)/api/link/community-links.mdx
* (developer-tools)/react/(latest)/api/link/introduction.mdx
* (developer-tools)/react/(latest)/api/link/persisted-queries.mdx
* (developer-tools)/react/(latest)/api/react/hooks.mdx
* (developer-tools)/react/(latest)/api/react/preloading.mdx
* (developer-tools)/react/(latest)/api/react/ssr.mdx
* (developer-tools)/react/(latest)/api/react/testing.mdx
* (developer-tools)/react/(latest)/caching/advanced-topics.mdx
* (developer-tools)/react/(latest)/caching/cache-configuration.mdx
* (developer-tools)/react/(latest)/caching/cache-field-behavior.mdx
* (developer-tools)/react/(latest)/caching/cache-interaction.mdx
* (developer-tools)/react/(latest)/caching/garbage-collection.mdx
* (developer-tools)/react/(latest)/caching/memory-management.mdx
* (developer-tools)/react/(latest)/caching/overview.mdx
* (developer-tools)/react/(latest)/data/defer.mdx
* (developer-tools)/react/(latest)/data/directives.mdx
* (developer-tools)/react/(latest)/data/document-transforms.mdx
* (developer-tools)/react/(latest)/data/error-handling.mdx
* (developer-tools)/react/(latest)/data/file-uploads.mdx
* (developer-tools)/react/(latest)/data/fragments.mdx
* (developer-tools)/react/(latest)/data/mutations.mdx
* (developer-tools)/react/(latest)/data/operation-best-practices.mdx
* (developer-tools)/react/(latest)/data/queries.mdx
* (developer-tools)/react/(latest)/data/refetching.mdx
* (developer-tools)/react/(latest)/data/subscriptions.mdx
* (developer-tools)/react/(latest)/data/suspense.mdx
* (developer-tools)/react/(latest)/development-testing/client-schema-mocking.mdx
* (developer-tools)/react/(latest)/development-testing/developer-tooling.mdx
* (developer-tools)/react/(latest)/development-testing/schema-driven-testing.mdx
* (developer-tools)/react/(latest)/development-testing/static-typing.mdx
* (developer-tools)/react/(latest)/development-testing/testing.mdx
* (developer-tools)/react/(latest)/integrations/integrations.mdx
* (developer-tools)/react/(latest)/integrations/react-native.mdx
* (developer-tools)/react/(latest)/integrations/webpack.mdx
* (developer-tools)/react/(latest)/local-state/local-resolvers.mdx
* (developer-tools)/react/(latest)/local-state/local-state-management.mdx
* (developer-tools)/react/(latest)/local-state/managing-state-with-field-policies.mdx
* (developer-tools)/react/(latest)/local-state/reactive-variables.mdx
* (developer-tools)/react/(latest)/migrating/apollo-client-3-migration.mdx
* (developer-tools)/react/(latest)/networking/advanced-http-networking.mdx
* (developer-tools)/react/(latest)/networking/authentication.mdx
* (developer-tools)/react/(latest)/networking/basic-http-networking.mdx
* (developer-tools)/react/(latest)/pagination/core-api.mdx
* (developer-tools)/react/(latest)/pagination/cursor-based.mdx
* (developer-tools)/react/(latest)/pagination/key-args.mdx
* (developer-tools)/react/(latest)/pagination/offset-based.mdx
* (developer-tools)/react/(latest)/performance/babel.mdx
* (developer-tools)/react/(latest)/performance/optimistic-ui.mdx
* (developer-tools)/react/(latest)/performance/performance.mdx
* (developer-tools)/react/(latest)/performance/server-side-rendering.mdx
* (developer-tools)/react/(latest)/_sidebar.yaml
- (developer-tools)/react/(latest)/api/link/apollo-link-rest.mdx
- (developer-tools)/react/(latest)/api/react/components.mdx
- (developer-tools)/react/(latest)/api/react/hoc.mdx
- (developer-tools)/react/(latest)/local-state/client-side-schema.mdx
- (developer-tools)/react/(latest)/migrating/hooks-migration.mdx

Build ID: f53eeda74294a1d2c7ada243
Build Logs: View logs

URL: https://www.apollographql.com/docs/deploy-preview/f53eeda74294a1d2c7ada243

@pkg-pr-new

pkg-pr-new Bot commented Aug 6, 2025

Copy link
Copy Markdown
npm i https://pkg.pr.new/apollographql/apollo-client/@apollo/client@12833

commit: bd78991

@github-actions

github-actions Bot commented Aug 6, 2025

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (CJS) 42.83 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production) (CJS) 37.74 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" 32.83 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production) 27 KB (0%)
import { ApolloProvider } from "@apollo/client/react" 5.9 KB (0%)
import { ApolloProvider } from "@apollo/client/react" (production) 971 B (0%)
import { useQuery } from "@apollo/client/react" 7.21 KB (0%)
import { useQuery } from "@apollo/client/react" (production) 2.23 KB (0%)
import { useLazyQuery } from "@apollo/client/react" 7.1 KB (0%)
import { useLazyQuery } from "@apollo/client/react" (production) 2.13 KB (0%)
import { useMutation } from "@apollo/client/react" 6.45 KB (0%)
import { useMutation } from "@apollo/client/react" (production) 1.48 KB (0%)
import { useSubscription } from "@apollo/client/react" 6.77 KB (0%)
import { useSubscription } from "@apollo/client/react" (production) 1.79 KB (0%)
import { useSuspenseQuery } from "@apollo/client/react" 8.57 KB (0%)
import { useSuspenseQuery } from "@apollo/client/react" (production) 3.63 KB (0%)
import { useBackgroundQuery } from "@apollo/client/react" 8.33 KB (0%)
import { useBackgroundQuery } from "@apollo/client/react" (production) 3.38 KB (0%)
import { useLoadableQuery } from "@apollo/client/react" 8.28 KB (0%)
import { useLoadableQuery } from "@apollo/client/react" (production) 3.36 KB (0%)
import { useReadQuery } from "@apollo/client/react" 6.59 KB (0%)
import { useReadQuery } from "@apollo/client/react" (production) 1.63 KB (0%)
import { useFragment } from "@apollo/client/react" 6.66 KB (0%)
import { useFragment } from "@apollo/client/react" (production) 1.69 KB (0%)

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: I've avoided using dataState in the examples until we have that completely flushed out.

@jerelmiller
jerelmiller force-pushed the jerel/get-started-doc branch 2 times, most recently from 83bb286 to c47e0e2 Compare August 7, 2025 02:04

@phryneas phryneas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some minor additions, looks great!

@@ -21,15 +21,14 @@ Applications that use Apollo Client require two top-level dependencies:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Above this line:

-Applications that use Apollo Client require two top-level dependencies:
+Applications that use Apollo Client require three top-level dependencies:

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! I changed it to "the following" instead so we don't have to remember to update the count ever again 🤣

Comment thread docs/source/data/queries.mdx Outdated
Comment thread docs/source/data/queries.mdx
Comment thread docs/source/data/queries.mdx Outdated

#### Retaining query results

In-flight queries executed by `useLazyQuery` are aborted when the component unmounts, causing the promise to reject. In some cases, you might find this behavior undesirable and would prefer to let the query run to completion.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In-flight queries executed by `useLazyQuery` are aborted when the component unmounts, causing the promise to reject. In some cases, you might find this behavior undesirable and would prefer to let the query run to completion.
In-flight queries executed by `useLazyQuery` are aborted when the component unmounts or another query ist started via the execution function, causing the promise to reject. (This is a silent rejection, so unless you called `.then`, `.catch` or `await`ed the promise, you won't see it.)

@phryneas phryneas Aug 8, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two independent edits in this - the addition in parantheses could also be a <Note pararaph? Not sure.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya I think a note makes sense. I'll expand on this a bit more as well.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in b2b37e6

Comment thread docs/source/data/queries.mdx Outdated
@github-actions github-actions Bot added the auto-cleanup 🤖 label Aug 8, 2025
jerelmiller and others added 5 commits August 8, 2025 14:56
Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
@jerelmiller
jerelmiller merged commit 410b292 into release-4.0 Aug 8, 2025
44 checks passed
@jerelmiller
jerelmiller deleted the jerel/get-started-doc branch August 8, 2025 21:33
Comment thread docs/source/data/queries.mdx Outdated

<Note>

Apollo Client ensures the rejected promise doesn't throw an unhandled rejection error when you don't add a rejection handler to the promise. This however means that aborted errors are silent and might go unnoticed. If you want to be notified when the request is aborted, provide a rejection handler for the promise.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not completely correct - calling promise.then(onlyAResolvedHandler) will also cause an error to be thrown, not only promise.then(resolvedHandler, rejectionHandler) or promise.catch(rejectionHandler)

@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Sep 11, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants