gwansikk commented 3 weeks ago

Overview

close: #1267

<QueryClientConsumer/> props vary depending on the TanStack Query version (the API is different).

In TanStack Query v4, useQueryClient accepts context?: React.Context<QueryClient | undefined> as a parameter.
In TanStack Query v5, useQueryClient accepts queryClient?: QueryClient as a parameter.

QueryClientConsumer for v4:

<QueryClientConsumer context={reactQueryContext}>
  {(queryClient) => {
    expectTypeOf(queryClient).toEqualTypeOf<QueryClient>()
    return <></>
  }}
</QueryClientConsumer>

QueryClientConsumer for v5:

<QueryClientConsumer queryClient={queryClient}>
  {(queryClient) => {
    expectTypeOf(queryClient).toEqualTypeOf<QueryClient>()
    return <></>
  }}
</QueryClientConsumer>

I will update the official documentation to explain this.

PR Checklist

[x] I did below actions if need

I read the Contributing Guide
I added documents and tests.

coauthors[bot] commented 3 weeks ago

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	https://github.com/toss/suspensive/pull/1269#discussion_r1755096057 https://github.com/toss/suspensive/pull/1269#discussion_r1755159381 https://github.com/toss/suspensive/pull/1269#discussion_r1755160218 https://github.com/toss/suspensive/pull/1269#discussion_r1755160592 https://github.com/toss/suspensive/pull/1269#discussion_r1756850609 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2297774033 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2297919576 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2297921545 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2297922733 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2300289400 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2300307960 https://github.com/toss/suspensive/pull/1269#issuecomment-2343183460	12	`Co-authored-by: manudeli <61593290+manudeli@users.noreply.github.com>`
@gwansikk	https://github.com/toss/suspensive/pull/1269#discussion_r1756474084 https://github.com/toss/suspensive/pull/1269#pullrequestreview-2299709149 https://github.com/toss/suspensive/pull/1269#issuecomment-2343585119 https://github.com/toss/suspensive/pull/1269	4	`Co-authored-by: gwansikk <39869096+gwansikk@users.noreply.github.com>`
@codecov-commenter	https://github.com/toss/suspensive/pull/1269#issuecomment-2342991421	1	`Co-authored-by: codecov-commenter <65553080+codecov-commenter@users.noreply.github.com>`

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 1:23pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 1:23pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 1:23pm

changeset-bot[bot] commented 3 weeks ago

🦋 Changeset detected

Latest commit: 5c5767506bf9c1a961cc590716aedbfb0aadbb8a

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

This PR includes changesets to release 12 packages

| Name | Type | | ------------------------------------------- | ----- | | @suspensive/react-query-4 | Minor | | @suspensive/react-query-5 | Minor | | @suspensive/react-query | Minor | | @suspensive/utils | Minor | | @suspensive/react | Minor | | @suspensive/jotai | Minor | | @suspensive/cache | Patch | | @suspensive/react-dom | Patch | | @suspensive/react-image | Patch | | @suspensive/react-native | Patch | | @suspensive/react-query-next-experimental-4 | Patch | | @suspensive/react-query-next-experimental | 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[bot] commented 3 weeks ago

Size Change: +158 B (+0.17%)

Total Size: 94.5 kB

Filename	Size	Change
`packages/react-query-4/dist/index.cjs`	1.86 kB	+55 B (+3.05%)
`packages/react-query-4/dist/index.js`	394 B	+24 B (+6.49%)	🔍
`packages/react-query-5/dist/index.cjs`	1.76 kB	+58 B (+3.41%)
`packages/react-query-5/dist/index.js`	391 B	+21 B (+5.68%)	🔍

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `packages/cache/dist/Cache.cjs` | 1.7 kB | | `packages/cache/dist/Cache.js` | 129 B | | `packages/cache/dist/cacheOptions.cjs` | 539 B | | `packages/cache/dist/cacheOptions.js` | 136 B | | `packages/cache/dist/CacheProvider.cjs` | 655 B | | `packages/cache/dist/CacheProvider.js` | 147 B | | `packages/cache/dist/index.cjs` | 2.2 kB | | `packages/cache/dist/index.js` | 240 B | | `packages/cache/dist/Read.cjs` | 982 B | | `packages/cache/dist/Read.js` | 157 B | | `packages/cache/dist/types.cjs` | 416 B | | `packages/cache/dist/types.js` | 66 B | | `packages/cache/dist/useCache.cjs` | 652 B | | `packages/cache/dist/useCache.js` | 142 B | | `packages/cache/dist/useRead.cjs` | 728 B | | `packages/cache/dist/useRead.js` | 150 B | | `packages/jotai/dist/Atom.cjs` | 660 B | | `packages/jotai/dist/Atom.js` | 115 B | | `packages/jotai/dist/AtomValue.cjs` | 647 B | | `packages/jotai/dist/AtomValue.js` | 120 B | | `packages/jotai/dist/index.cjs` | 755 B | | `packages/jotai/dist/index.js` | 158 B | | `packages/jotai/dist/SetAtom.cjs` | 645 B | | `packages/jotai/dist/SetAtom.js` | 118 B | | `packages/react-dom/dist/index.cjs` | 2.11 kB | | `packages/react-dom/dist/index.js` | 139 B | | `packages/react-dom/dist/InView.cjs` | 2.1 kB | | `packages/react-dom/dist/InView.js` | 130 B | | `packages/react-dom/dist/useInView.cjs` | 1.87 kB | | `packages/react-dom/dist/useInView.js` | 120 B | | `packages/react-image/dist/index.cjs` | 1.54 kB | | `packages/react-image/dist/index.js` | 140 B | | `packages/react-image/dist/Load.cjs` | 1.32 kB | | `packages/react-image/dist/Load.js` | 126 B | | `packages/react-image/dist/SuspenseImage.cjs` | 1.53 kB | | `packages/react-image/dist/SuspenseImage.js` | 137 B | | `packages/react-native/dist/index.cjs` | 619 B | | `packages/react-native/dist/index.js` | 122 B | | `packages/react-native/dist/TestText.cjs` | 612 B | | `packages/react-native/dist/TestText.js` | 119 B | | `packages/react-query-4/dist/infiniteQueryOptions.cjs` | 548 B | | `packages/react-query-4/dist/infiniteQueryOptions.js` | 143 B | | `packages/react-query-4/dist/Mutation.cjs` | 821 B | | `packages/react-query-4/dist/Mutation.js` | 132 B | | `packages/react-query-4/dist/PrefetchInfiniteQuery.cjs` | 722 B | | `packages/react-query-4/dist/PrefetchInfiniteQuery.js` | 155 B | | `packages/react-query-4/dist/PrefetchQuery.cjs` | 712 B | | `packages/react-query-4/dist/PrefetchQuery.js` | 147 B | | `packages/react-query-4/dist/QueryClientConsumer.cjs` | 665 B | | `packages/react-query-4/dist/QueryClientConsumer.js` | 140 B | | `packages/react-query-4/dist/QueryErrorBoundary.cjs` | 1.12 kB | | `packages/react-query-4/dist/QueryErrorBoundary.js` | 142 B | | `packages/react-query-4/dist/queryOptions.cjs` | 540 B | | `packages/react-query-4/dist/queryOptions.js` | 135 B | | `packages/react-query-4/dist/SuspenseInfiniteQuery.cjs` | 1.05 kB | | `packages/react-query-4/dist/SuspenseInfiniteQuery.js` | 154 B | | `packages/react-query-4/dist/SuspenseQueries.cjs` | 923 B | | `packages/react-query-4/dist/SuspenseQueries.js` | 149 B | | `packages/react-query-4/dist/SuspenseQuery.cjs` | 1.04 kB | | `packages/react-query-4/dist/SuspenseQuery.js` | 147 B | | `packages/react-query-4/dist/usePrefetchInfiniteQuery.cjs` | 648 B | | `packages/react-query-4/dist/usePrefetchInfiniteQuery.js` | 148 B | | `packages/react-query-4/dist/usePrefetchQuery.cjs` | 639 B | | `packages/react-query-4/dist/usePrefetchQuery.js` | 140 B | | `packages/react-query-4/dist/useSuspenseInfiniteQuery.cjs` | 833 B | | `packages/react-query-4/dist/useSuspenseInfiniteQuery.js` | 147 B | | `packages/react-query-4/dist/useSuspenseQueries.cjs` | 833 B | | `packages/react-query-4/dist/useSuspenseQueries.js` | 142 B | | `packages/react-query-4/dist/useSuspenseQuery.cjs` | 824 B | | `packages/react-query-4/dist/useSuspenseQuery.js` | 140 B | | `packages/react-query-5/dist/infiniteQueryOptions.cjs` | 573 B | | `packages/react-query-5/dist/infiniteQueryOptions.js` | 144 B | | `packages/react-query-5/dist/Mutation.cjs` | 821 B | | `packages/react-query-5/dist/Mutation.js` | 132 B | | `packages/react-query-5/dist/PrefetchInfiniteQuery.cjs` | 647 B | | `packages/react-query-5/dist/PrefetchInfiniteQuery.js` | 145 B | | `packages/react-query-5/dist/PrefetchQuery.cjs` | 639 B | | `packages/react-query-5/dist/PrefetchQuery.js` | 137 B | | `packages/react-query-5/dist/QueryClientConsumer.cjs` | 663 B | | `packages/react-query-5/dist/QueryClientConsumer.js` | 140 B | | `packages/react-query-5/dist/QueryErrorBoundary.cjs` | 1.12 kB | | `packages/react-query-5/dist/QueryErrorBoundary.js` | 142 B | | `packages/react-query-5/dist/queryOptions.cjs` | 563 B | | `packages/react-query-5/dist/queryOptions.js` | 136 B | | `packages/react-query-5/dist/SuspenseInfiniteQuery.cjs` | 833 B | | `packages/react-query-5/dist/SuspenseInfiniteQuery.js` | 145 B | | `packages/react-query-5/dist/SuspenseQueries.cjs` | 671 B | | `packages/react-query-5/dist/SuspenseQueries.js` | 139 B | | `packages/react-query-5/dist/SuspenseQuery.cjs` | 825 B | | `packages/react-query-5/dist/SuspenseQuery.js` | 137 B | | `packages/react-query-5/dist/usePrefetchInfiniteQuery.cjs` | 577 B | | `packages/react-query-5/dist/usePrefetchInfiniteQuery.js` | 148 B | | `packages/react-query-5/dist/usePrefetchQuery.cjs` | 569 B | | `packages/react-query-5/dist/usePrefetchQuery.js` | 140 B | | `packages/react-query-5/dist/useSuspenseInfiniteQuery.cjs` | 577 B | | `packages/react-query-5/dist/useSuspenseInfiniteQuery.js` | 148 B | | `packages/react-query-5/dist/useSuspenseQueries.cjs` | 571 B | | `packages/react-query-5/dist/useSuspenseQueries.js` | 142 B | | `packages/react-query-5/dist/useSuspenseQuery.cjs` | 569 B | | `packages/react-query-5/dist/useSuspenseQuery.js` | 140 B | | `packages/react-query-next-experimental-4/dist/htmlescape.cjs` | 656 B | | `packages/react-query-next-experimental-4/dist/htmlescape.js` | 133 B | | `packages/react-query-next-experimental-4/dist/HydrationStreamProvider.cjs` | 1.79 kB | | `packages/react-query-next-experimental-4/dist/HydrationStreamProvider.js` | 156 B | | `packages/react-query-next-experimental-4/dist/index.cjs` | 2.41 kB | | `packages/react-query-next-experimental-4/dist/index.js` | 162 B | | `packages/react-query-next-experimental-4/dist/ReactQueryStreamedHydration.cjs` | 2.41 kB | | `packages/react-query-next-experimental-4/dist/ReactQueryStreamedHydration.js` | 164 B | | `packages/react-query-next-experimental/dist/index.cjs` | 595 B | | `packages/react-query-next-experimental/dist/index.js` | 161 B | | `packages/react-query/dist/index.cjs` | 551 B | | `packages/react-query/dist/index.js` | 121 B | | `packages/react-query/dist/v4.cjs` | 550 B | | `packages/react-query/dist/v4.js` | 116 B | | `packages/react-query/dist/v5.cjs` | 550 B | | `packages/react-query/dist/v5.js` | 116 B | | `packages/react/dist/ClientOnly.cjs` | 736 B | | `packages/react/dist/ClientOnly.js` | 141 B | | `packages/react/dist/DefaultProps.cjs` | 1.05 kB | | `packages/react/dist/DefaultProps.js` | 167 B | | `packages/react/dist/Delay.cjs` | 1.11 kB | | `packages/react/dist/Delay.js` | 149 B | | `packages/react/dist/DevMode.cjs` | 530 B | | `packages/react/dist/DevMode.js` | 131 B | | `packages/react/dist/ErrorBoundary.cjs` | 2.74 kB | | `packages/react/dist/ErrorBoundary.js` | 206 B | | `packages/react/dist/ErrorBoundaryGroup.cjs` | 1.37 kB | | `packages/react/dist/ErrorBoundaryGroup.js` | 180 B | | `packages/react/dist/index.cjs` | 4.19 kB | | `packages/react/dist/index.js` | 369 B | | `packages/react/dist/Suspense.cjs` | 1.3 kB | | `packages/react/dist/Suspense.js` | 172 B | | `packages/react/dist/Suspensive.cjs` | 1.26 kB | | `packages/react/dist/Suspensive.js` | 175 B | | `packages/react/dist/wrap.cjs` | 3.67 kB | | `packages/react/dist/wrap.js` | 209 B | | `packages/utils/dist/ConstructorType.cjs` | 424 B | | `packages/utils/dist/ConstructorType.js` | 76 B | | `packages/utils/dist/increase.cjs` | 533 B | | `packages/utils/dist/increase.js` | 119 B | | `packages/utils/dist/index.cjs` | 1.58 kB | | `packages/utils/dist/index.js` | 926 B | | `packages/utils/dist/noop.cjs` | 522 B | | `packages/utils/dist/noop.js` | 115 B | | `packages/utils/dist/Nullable.cjs` | 419 B | | `packages/utils/dist/Nullable.js` | 69 B | | `packages/utils/dist/OmitKeyof.cjs` | 420 B | | `packages/utils/dist/OmitKeyof.js` | 70 B | | `packages/utils/dist/RequiredKeyof.cjs` | 425 B | | `packages/utils/dist/RequiredKeyof.js` | 74 B | | `packages/utils/dist/useIsomorphicLayoutEffect.cjs` | 588 B | | `packages/utils/dist/useIsomorphicLayoutEffect.js` | 136 B | | `packages/utils/dist/usePreservedCallback.cjs` | 697 B | | `packages/utils/dist/usePreservedCallback.js` | 144 B | | `packages/utils/dist/useTimeout.cjs` | 769 B | | `packages/utils/dist/useTimeout.js` | 144 B |

_{compressed-size-action}

codspeed-hq[bot] commented 3 weeks ago

CodSpeed Performance Report

Merging #1269 will create unknown performance changes

_{Comparing react-query/feature/query-client (5c57675) with main (48f36b6)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

codecov-commenter commented 3 weeks ago

Codecov Report

Attention: Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.

Project coverage is 73.04%. Comparing base (48f36b6) to head (5c57675).

Additional details and impacted files

[![Impacted file tree graph](https://app.codecov.io/gh/toss/suspensive/pull/1269/graphs/tree.svg?width=650&height=150&src=pr&token=5PopssACmx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss)](https://app.codecov.io/gh/toss/suspensive/pull/1269?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #1269 +/- ## ========================================== - Coverage 73.39% 73.04% -0.36% ========================================== Files 81 83 +2 Lines 827 831 +4 Branches 182 182 ========================================== Hits 607 607 - Misses 196 200 +4 Partials 24 24 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/utils](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `47.16% <ø> (ø)` | | | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-dom](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `96.66% <ø> (ø)` | | | [@suspensive/react-native](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `72.09% <ø> (ø)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <0.00%> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <0.00%> (ø)` | | | [@suspensive/react-query-next-experimental](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `∅ <ø> (∅)` | | | [@suspensive/react-query-next-experimental-4](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `6.15% <ø> (ø)` | | | [@suspensive/jotai](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/cache](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `98.01% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/1269/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `80.39% <ø> (ø)` | |

manudeli commented 3 weeks ago

I absolutely agree why this component is needed. But I'm a little worried about the name QueryClient because it's an interface in @tanstack/query-core. I'd like to propose an alternative name: QueryClientConsumer. I want to know your opinion.