Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide queryRef in a Symbol in useBackgroundQuery return value #11010

Merged
merged 5 commits into from
Jun 26, 2023

Conversation

alessbell
Copy link
Member

Closes #10875.

Renames QueryReference to InternalQueryReference so that the QueryReference type name can remain unchanged, which will be referenced in userland code for apps written in TS as is probably much less confusing than any alternative :)

Also adds some basic type docs to QueryReference to display in IDEs that support it:
CleanShot 2023-06-23 at 14 44 09

At first I thought maybe SuspenseCache should return a QueryReference when its getQueryRef method is called, but very quickly realized that any hook that returns a QueryReference should be responsible for stashing it behind the Symbol instead of within Apollo's Suspense-y internals. I hesitated to rename queryRef variable names > internalQueryRef everywhere for brevity, but if this is confusing I can make those changes too.

Checklist:

  • If this PR contains changes to the library itself (not necessary for e.g. docs updates), please include a changeset (see CONTRIBUTING.md)
  • If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
  • Make sure all of the significant new logic is covered by tests

@changeset-bot
Copy link

changeset-bot bot commented Jun 23, 2023

🦋 Changeset detected

Latest commit: d2c2379

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 Patch

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

@github-actions
Copy link
Contributor

github-actions bot commented Jun 23, 2023

size-limit report 📦

Path Size
dist/apollo-client.min.cjs 36.9 KB (+0.1% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" 43.41 KB (+0.21% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" 32.59 KB (0%)
import { ApolloProvider } from "dist/react/index.js" 1.3 KB (0%)
import { useQuery } from "dist/react/index.js" 4.34 KB (0%)
import { useLazyQuery } from "dist/react/index.js" 4.66 KB (0%)
import { useMutation } from "dist/react/index.js" 2.57 KB (0%)
import { useSubscription } from "dist/react/index.js" 2.34 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" 3.71 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" 3.79 KB (+26.21% 🔺)
import { useReadQuery } from "dist/react/index.js" 2.47 KB (+36.59% 🔺)
import { useFragment } from "dist/react/index.js" 2.12 KB (0%)

@@ -617,7 +618,7 @@ describe('useBackgroundQuery', () => {

const [queryRef] = result.current;

const _result = await queryRef.promise;
const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
Copy link
Member Author

Choose a reason for hiding this comment

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

A note to anyone who'd argue these tests are testing implementation details: I'd agree! The vast majority are integration tests, though we also have a few unit tests that violate this rule in a way that feels like an acceptable tradeoff to keep some tests more compact :)

interface QueryReferenceOptions {
export const QUERY_REFERENCE_SYMBOL: unique symbol = Symbol();
/**
* A `QueryReference` is an opaque object returned by {@link useBackgroundQuery}.
Copy link
Member Author

Choose a reason for hiding this comment

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

Open to suggestions/wordsmithing here! I'm not wedded to this language, but wanted something short and that gets at the notion that QueryReference should only be passed into useReadQuery/its properties should not be accessed directly.

Copy link
Member

@jerelmiller jerelmiller left a comment

Choose a reason for hiding this comment

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

Looks great! I'd love to rename the argument to useReadQuery back to queryRef, but otherwise this change makes a lot of sense. Thanks for putting this together!

@@ -197,9 +200,9 @@ export function useBackgroundQuery<
}, [queryRef, fetchMore, refetch]);
}

export function useReadQuery<TData>(queryRef: QueryReference<TData>) {
export function useReadQuery<TData>(_queryRef: QueryReference<TData>) {
Copy link
Member

Choose a reason for hiding this comment

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

Since this argument is visible publicly, I'd prefer to leave this named queryRef and just call the variable inside this hook internalQueryRef (or whatever you see fit) to avoid confusion for anyone that looks at the arguments through their editor.

Screenshot 2023-06-23 at 4 02 04 PM

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah yep, good call! Resolved in 35b7667.

Copy link
Member

@phryneas phryneas left a comment

Choose a reason for hiding this comment

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

Looks good from my side, nothing to add to Jerels suggestions :)

@alessbell
Copy link
Member Author

Bumped the size limit in d2c2379 but the release-3.8 branch is also failing - assuming I need to bump that on main so I'll merge this once the tests check passes.

@alessbell alessbell merged commit 1051a9c into release-3.8 Jun 26, 2023
@alessbell alessbell deleted the issue-10875-hide-queryRef-in-a-symbol branch June 26, 2023 15:28
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants