Colocate and flatten hook types #12465

jerelmiller · 2025-03-20T04:28:55Z

Moves hook types from the shared react/types/types.ts file and colocates them with the hooks themselves. The types have also been renamed to ensure a consistent naming scheme. Hook types are now prefixed with the hook name.

changeset-bot · 2025-03-20T04:28:59Z

🦋 Changeset detected

Latest commit: ba20497

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@apollo/client	Major

Not sure what this means? Click here to learn what changesets are.

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

svc-apollo-docs · 2025-03-20T04:29:00Z

⚠️ Docs preview not attached to branch

The preview was not built because the PR's base branch release-4.0 is not in the list of sources.

An Apollo team member can comment one of the following commands to dictate which branch to attach the preview to:

!docs set-base-branch version-2.6
!docs set-base-branch main

Build ID: 1e2d2f6dcbe7ad38943ca404

pkg-pr-new · 2025-03-20T04:30:10Z

npm i https://pkg.pr.new/@apollo/client@12465

commit: 20aa031

.changeset/odd-lemons-relax.md

jerelmiller · 2025-03-20T04:32:32Z

src/core/watchQueryOptions.ts

Will revisit more of the core types in a separate PR as this is focused specifically on the react types.

jerelmiller · 2025-03-20T04:32:57Z

src/core/watchQueryOptions.ts

@@ -90,14 +90,6 @@ export interface QueryOptions<
 export interface WatchQueryOptions<
  TVariables extends OperationVariables = OperationVariables,
  TData = unknown,
-> extends SharedWatchQueryOptions<TVariables, TData> {


This was the one core change I made since SharedWatchQueryOptions were only used by the react types and could thus be flatten after those were updated.

jerelmiller · 2025-03-20T04:35:07Z

src/react/hooks/index.ts

We had several cases in the existing types where an internal type was exported publicly since it was shared between several files. I've removed export * so we explicitly list which types are publicly available rather than the case where we could accidentally introduce one later.

jerelmiller · 2025-03-20T04:36:42Z

src/react/hooks/useFragment.ts


 import { useDeepMemo, wrapHook } from "./internal/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";

-export interface UseFragmentOptions<TData, TVariables>
-  extends Omit<


We were omitting way more fields from these types than this actually brought in. This is where the flattening is nice because its much easier to see exactly which options are supported.

jerelmiller · 2025-03-20T04:40:44Z

src/react/hooks/useMutation.ts

+  /** {@inheritDoc @apollo/client!MutationOptionsDocumentation#mutation:member} */
+  // TODO: Remove this option. We shouldn't allow the mutation to be overridden
+  // in the mutation function
+  mutation?: DocumentNode | TypedDocumentNode<TData, TVariables>;


Noticed this while going over this. I don't think we should allow the mutate function to accept a different mutation document. In fact, we don't persist this mutation document in any form, so its used for only that execution of the mutation, but this means that we will be returning results for a mutation that doesn't matched the document passed to the hook itself. This could add way too much confusion. I'll remove this in a separate PR since this is focused on the React types, but I wanted to point this out.

github-actions · 2025-03-20T18:55:11Z

size-limit report 📦

Path	Size
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (CJS)	41.14 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production) (CJS)	36.66 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client"	31.79 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production)	26.8 KB (0%)
import { ApolloProvider } from "@apollo/client/react"	5.17 KB (0%)
import { ApolloProvider } from "@apollo/client/react" (production)	960 B (0%)
import { useQuery } from "@apollo/client/react"	7.23 KB (0%)
import { useQuery } from "@apollo/client/react" (production)	3 KB (-0.26% 🔽)
import { useLazyQuery } from "@apollo/client/react"	6.38 KB (-0.14% 🔽)
import { useLazyQuery } from "@apollo/client/react" (production)	2.16 KB (-0.14% 🔽)
import { useMutation } from "@apollo/client/react"	6.46 KB (-0.02% 🔽)
import { useMutation } from "@apollo/client/react" (production)	2.23 KB (+0.09% 🔺)
import { useSubscription } from "@apollo/client/react"	6.83 KB (-0.02% 🔽)
import { useSubscription } from "@apollo/client/react" (production)	2.62 KB (-0.12% 🔽)
import { useSuspenseQuery } from "@apollo/client/react"	8.18 KB (+0.02% 🔺)
import { useSuspenseQuery } from "@apollo/client/react" (production)	3.97 KB (0%)
import { useBackgroundQuery } from "@apollo/client/react"	8.02 KB (-0.05% 🔽)
import { useBackgroundQuery } from "@apollo/client/react" (production)	3.81 KB (0%)
import { useLoadableQuery } from "@apollo/client/react"	8.06 KB (-0.21% 🔽)
import { useLoadableQuery } from "@apollo/client/react" (production)	3.87 KB (-0.18% 🔽)
import { useReadQuery } from "@apollo/client/react"	5.82 KB (0%)
import { useReadQuery } from "@apollo/client/react" (production)	1.58 KB (+0.07% 🔺)
import { useFragment } from "@apollo/client/react"	5.86 KB (-0.04% 🔽)
import { useFragment } from "@apollo/client/react" (production)	1.65 KB (+1.26% 🔺)

jerelmiller · 2025-03-20T22:32:11Z

src/react/types/types.ts

-
-/* Query types */
-
-export interface BaseQueryOptions<


I kept the old hook options/result types but got rid of these base types that were only used for type inheritance. Should we keep these as well or are we ok getting rid of them and just keeping the types previously used by each hook?

Tbh., those should never have been used in userland, so I'm fine with removing them.

netlify · 2025-03-20T22:35:25Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`ba20497`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/67e172c9422f0400081d4b8a
😎 Deploy Preview	https://deploy-preview-12465--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.

jerelmiller · 2025-03-20T23:11:31Z

@phryneas this one should be ready for rereview again using the namespace implementation that you proposed for all hooks.

jerelmiller · 2025-03-21T00:55:02Z

@phryneas something I noticed looking at the build output is that types-only files get a generated .js file with an empty export (export {}). Is this something we can detect in the build and filter out? That might help a touch with bundle size. Looks like this is something happening on the release-4.0 branch as well.

phryneas

Approved!
Granted, this is almost impossible to review prop-by-prop without repeating the full PR from zero, but it seems everything has moved over, and the fact that none of our tests needed any adjustments beyond lower-casing the first character and inserting a dot, I'm pretty confident these changes are correct.

.changeset/khaki-spies-work.md

phryneas · 2025-03-24T12:40:35Z

src/react/types/deprecated.ts

+  useSuspenseFragment,
+  useSuspenseQuery,
+} from "@apollo/client/react/hooks";
+


LoadableQueryHookFetchPolicy, FetchMoreFunction and RefetchFunction have disappeared - do we want to add these to this file, too?

FetchMoreFunction and RefetchFunction were always meant to be internal, so I'd rather leave those out. And good catch about LoadbleQueryHookFetchPolicy. For some reason I exported the first attempt new names instead of the current names. Fixed in 20aa031

Oh I should mention that FetchMoreFunction and RefetchFunction were exported from useSuspenseQuery previously, but we never exported those types in our index file. The only way you could get them was importing from useSuspenseQuery directly, so I'm fine leaving these out.

phryneas · 2025-03-24T12:41:08Z

src/react/types/types.ts

-
-/* Query types */
-
-export interface BaseQueryOptions<


Tbh., those should never have been used in userland, so I'm fine with removing them.

Co-authored-by: Lenz Weber-Tronic <[email protected]>

jerelmiller requested a review from phryneas March 20, 2025 04:28

jerelmiller changed the title ~~Colocate hook types~~ Colocate and flatten hook types Mar 20, 2025

jerelmiller commented Mar 20, 2025

View reviewed changes

.changeset/odd-lemons-relax.md Outdated Show resolved Hide resolved

jerelmiller commented Mar 20, 2025

View reviewed changes

Base automatically changed from jerel/remove-called-from-usequery to release-4.0 March 20, 2025 14:41

jerelmiller mentioned this pull request Mar 20, 2025

[4.0] experiment: namespace hook-related types #12466

Closed

jerelmiller force-pushed the jerel/inline-react-types branch from ca28fcd to e40bd80 Compare March 20, 2025 18:53

jerelmiller commented Mar 20, 2025

View reviewed changes

jerelmiller added 13 commits March 20, 2025 16:38

Inline QueryResult in useQuery and rename to UseQueryResult

708277a

Export UseQueryResult from useQuery

382fe2a

Add accidentally deleted networkStatus

3f4d46d

Update toEqualQueryResult matcher

3ca5eb1

Update type name in useQuery tests

f8f76d3

Use UseQueryResult type in useMutation tests

71b7f93

Remove children property from QueryDataOptions

d2605c2

Update matcher types to use UseQueryResult

381268b

Update MockedProvider tests to use UseQueryResult type

fd28524

Remove QueryResult type

e938ff3

Inline useQuery options type and rename to UseQueryOptions

664e8ef

Export UseQueryOptions

6188ca7

Remove unused import

ebeaff0

jerelmiller added 12 commits March 20, 2025 16:38

Convert useSuspenseFragment types to namespace

c61177c

Add deprecated useSuspenseFragment types

812c8be

Convert useLoadableQuery types to namespace

25dbe9a

Add deprecated useLoadableQuery types

0ee46d4

Convert useQueryRefHandlers types to namespace

c1f300f

Add deprecated useQueryRefHandlers types

0a35b75

Convert useReadQuery types to namespace

a9e1fc9

Add deprecated useReadQueryResult types

d2bcec7

Rerun api report

5f7fb36

Fix updated type in createQueryPreloader tests

817a294

Flatten MutationOptions base types

3e2e847

Rerun api report

9fb96f8

jerelmiller force-pushed the jerel/inline-react-types branch from 9948c88 to 9fb96f8 Compare March 20, 2025 22:38

jerelmiller added 2 commits March 20, 2025 17:03

Update changeset

182d1a8

Add another changeset

aa5fc71

Put back export *

4810ff1

jerelmiller force-pushed the jerel/inline-react-types branch from 6d230fb to 4810ff1 Compare March 21, 2025 00:29

jerelmiller added 3 commits March 20, 2025 18:45

Update size limits

8bc6dba

Use defaultValue in doc block

bdb168c

Remove export * again

a804cd6

phryneas approved these changes Mar 24, 2025

View reviewed changes

github-actions bot added the auto-cleanup 🤖 label Mar 24, 2025

jerelmiller and others added 3 commits March 24, 2025 08:49

Tweak changeset

a7d0e0f

Co-authored-by: Lenz Weber-Tronic <[email protected]>

Use old names for loadable query options

20aa031

Clean up Prettier, Size-limit, and Api-Extractor

ba20497

jerelmiller merged commit a132163 into release-4.0 Mar 24, 2025
39 checks passed

jerelmiller deleted the jerel/inline-react-types branch March 24, 2025 15:07

github-actions bot mentioned this pull request Mar 24, 2025

Version Packages (alpha) #12473

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Colocate and flatten hook types #12465

Colocate and flatten hook types #12465

jerelmiller commented Mar 20, 2025

changeset-bot bot commented Mar 20, 2025 •

edited

Loading

svc-apollo-docs commented Mar 20, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 20, 2025 •

edited

Loading

jerelmiller Mar 20, 2025

jerelmiller Mar 20, 2025

jerelmiller Mar 20, 2025

jerelmiller Mar 20, 2025

jerelmiller Mar 20, 2025

github-actions bot commented Mar 20, 2025 •

edited

Loading

jerelmiller Mar 20, 2025

phryneas Mar 24, 2025

netlify bot commented Mar 20, 2025 •

edited

Loading

jerelmiller commented Mar 20, 2025

jerelmiller commented Mar 21, 2025

phryneas left a comment

phryneas Mar 24, 2025

jerelmiller Mar 24, 2025

jerelmiller Mar 24, 2025

phryneas Mar 24, 2025

Colocate and flatten hook types #12465

Colocate and flatten hook types #12465

Conversation

jerelmiller commented Mar 20, 2025

changeset-bot bot commented Mar 20, 2025 • edited Loading

🦋 Changeset detected

svc-apollo-docs commented Mar 20, 2025 • edited Loading

⚠️ Docs preview not attached to branch

pkg-pr-new bot commented Mar 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 20, 2025 • edited Loading

size-limit report 📦

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Mar 20, 2025 • edited Loading

✅ Deploy Preview for apollo-client-docs ready!

jerelmiller commented Mar 20, 2025

jerelmiller commented Mar 21, 2025

phryneas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Mar 20, 2025 •

edited

Loading

svc-apollo-docs commented Mar 20, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 20, 2025 •

edited

Loading

netlify bot commented Mar 20, 2025 •

edited

Loading