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

Adds support for skipToken in options for useSuspenseQuery and useBackgroundQuery and soft deprecates skip option #11112

Merged
merged 73 commits into from
Aug 1, 2023

Conversation

jerelmiller
Copy link
Member

Closes #11093

Adds support for a new skipToken sentinel that can be passed as options to useSuspenseQuery and useBackgroundQuery. This works in place of skip for both of these hooks. As such, the skip option is now labeled as deprecated to nudge people to use this feature, which is generally more type-safe than the skip option.

Breaking change

This PR also changes the way queryRef is returned when skip is true or skipToken is used with useBackgroundQuery. Previously, a queryRef would always be returned, regardless of whether query execution was skipped. This has been updated to conditionally return a queryRef only when query execution is enabled. undefined is returned when initializing the hook skipped.

Before

function Parent() {
  const [queryRef] = useBackgroundQuery(query, skip ? skipToken : undefined);
  //      ^? QueryReference<TData | undefined>

  return <Child queryRef={queryRef} />
}

function Child({ queryRef }: { queryRef: QueryReference<TData | undefined> }) {
  const { data } = useReadQuery(queryRef);
}

After

function Parent() {
  const [queryRef] = useBackgroundQuery(query, skip ? skipToken : undefined);
  //      ^? QueryReference<TData> | undefined

  return queryRef ? <Child queryRef={queryRef} /> : null;
}

function Child({ queryRef }: { queryRef: QueryReference<TData> }) {
  const { data } = useReadQuery(queryRef);
}

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

} from '../cache/QueryReference.js';
import { __use } from './internal/index.js';
import { toApolloError } from './useSuspenseQuery.js';
import { invariant } from '../../utilities/globals/index.js';
Copy link
Member Author

Choose a reason for hiding this comment

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

I happened to notice we were importing this function from the wrong place. This has been updated to ensure its using the wrapped version.

},
];
}, [queryRef, fetchMore, refetch]);
return [
Copy link
Member Author

@jerelmiller jerelmiller Jul 29, 2023

Choose a reason for hiding this comment

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

There was no reason to memo this return tuple since the tuple itself didn't need to be referentially stable, just the items in the tuple. Typical usage of this hook will destructure this tuple, so no need to memoize it.

.changeset/early-days-stare.md Show resolved Hide resolved
src/react/hooks/constants.ts Outdated Show resolved Hide resolved
src/react/hooks/index.ts Outdated Show resolved Hide resolved
src/react/hooks/useBackgroundQuery.ts Outdated Show resolved Hide resolved
src/react/hooks/useBackgroundQuery.ts Show resolved Hide resolved
src/react/hooks/useBackgroundQuery.ts Outdated Show resolved Hide resolved
src/react/hooks/useReadQuery.ts Outdated Show resolved Hide resolved
src/react/hooks/useSuspenseQuery.ts Outdated Show resolved Hide resolved
src/react/types/types.ts Outdated Show resolved Hide resolved
src/react/types/types.ts Outdated Show resolved Hide resolved
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.

I'd love some minor changes in tests, but generally this is good to go!

src/react/hooks/__tests__/useBackgroundQuery.test.tsx Outdated Show resolved Hide resolved
src/react/hooks/__tests__/useBackgroundQuery.test.tsx Outdated Show resolved Hide resolved
src/react/hooks/__tests__/useBackgroundQuery.test.tsx Outdated Show resolved Hide resolved
src/react/hooks/__tests__/useBackgroundQuery.test.tsx Outdated Show resolved Hide resolved
});

// Toggle skip to `true`
await act(() => user.click(screen.getByText('Toggle skip')));
Copy link
Member

Choose a reason for hiding this comment

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

Independently of skip - why would another network request happen here in the first place? Do we need to change variables to provoke that without skip a request would be provoked here?

Copy link
Member Author

@jerelmiller jerelmiller Aug 1, 2023

Choose a reason for hiding this comment

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

It's more that I wanted to prove that switching back to skip: true didn't itself have any adverse effects such as tangling it up with some other value, or that it wasn't just a "skips the first time it's true" type of thing. skip is a suspenseful option, so it was just an extra check to ensure I wasn't suspending more than necessary.

You're right though, switching variables is probably a more solid way to show off that it does indeed skip. Let me see if I can make this change to make it more obvious what this test is trying to accomplish.

src/react/hooks/__tests__/useSuspenseQuery.test.tsx Outdated Show resolved Hide resolved
src/react/hooks/__tests__/useSuspenseQuery.test.tsx Outdated Show resolved Hide resolved
@jerelmiller jerelmiller merged commit b4aefcf into release-3.8 Aug 1, 2023
@jerelmiller jerelmiller deleted the skip-token branch August 1, 2023 22:22
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants