jimmycallin commented 1 month ago

This is a follow-up on https://github.com/TanStack/query/pull/8154 and the post-merge discussion.

This resolves a TS issue where you cannot pass an optional initialData object to the infiniteQueryOptions function. The previous referred solution only handled initialData callback functions.

nx-cloud[bot] commented 1 month ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2cd4d37897c011e172daf1e1a018027fea9f459a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

- [`nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3`](https://cloud.nx.app/runs/yXjHhL2CGL?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.

pkg-pr-new[bot] commented 1 month ago

Open in Stackblitz

More templates

- [@tanstack/query-example-angular-basic](https://pkg.pr.new/template/aa51e21d-f21b-45e3-ad9d-c235d044e609) - [@tanstack/query-example-angular-infinite-query-with-max-pages](https://pkg.pr.new/template/f081fae3-ae7b-4ec5-b3d8-c50dbbbcf681) - [@tanstack/query-example-angular-pagination](https://pkg.pr.new/template/c057b4b6-c1f9-4716-af0e-8fc697a3aa49) - [@tanstack/query-example-angular-router](https://pkg.pr.new/template/10979d51-b3db-4d6f-9b3b-0072ff85ea7c) - [@tanstack/query-example-angular-rxjs](https://pkg.pr.new/template/24c19449-be32-47cc-8791-f9a1dc16ae1e) - [@tanstack/query-example-angular-simple](https://pkg.pr.new/template/472f5c85-fe51-4084-acb4-b70d6f8a5018) - [@tanstack/query-example-solid-astro](https://pkg.pr.new/template/21004d01-c8bd-4a8e-bbbd-d579f67f768c) - [@tanstack/query-example-solid-basic](https://pkg.pr.new/template/f4986787-c850-4118-8390-76dfc338f48b) - [@tanstack/query-example-solid-basic-graphql-request](https://pkg.pr.new/template/0bed8d86-7a1c-46ec-9257-6a419ec35664) - [@tanstack/query-example-solid-default-query-function](https://pkg.pr.new/template/058eaf11-2750-4883-8574-f62512c88cff) - [@tanstack/query-example-solid-simple](https://pkg.pr.new/template/24ccd873-d6b9-468d-b231-7af2d79b0986) - [@tanstack/query-example-solid-start-streaming](https://pkg.pr.new/template/3617c3b8-06c2-4225-8dda-a1b193a4d473) - [@tanstack/query-example-react-algolia](https://pkg.pr.new/template/e91b8f68-8911-4f79-9482-e0591765d7ac) - [@tanstack/query-example-react-auto-refetching](https://pkg.pr.new/template/dd87f5c4-309b-4333-a641-1318a8be2d23) - [@tanstack/query-example-react-basic](https://pkg.pr.new/template/9a4918c5-2593-49c5-880c-fbe0d1dd046d) - [@tanstack/query-example-react-basic-graphql-request](https://pkg.pr.new/template/0c920309-ca88-4533-8a28-90e5831a4bfd) - [@tanstack/query-example-react-default-query-function](https://pkg.pr.new/template/efd21413-be1e-4e1f-8658-e07df9bb3322) - [@tanstack/query-example-react-devtools-panel](https://pkg.pr.new/template/01256e4f-2122-4635-9a93-765f28d9c8a6) - [@tanstack/query-example-react-infinite-query-with-max-pages](https://pkg.pr.new/template/934df3bc-5688-4b95-8bb5-c786d4b42f4c) - [@tanstack/query-example-react-load-more-infinite-scroll](https://pkg.pr.new/template/cce74ddc-51d2-41cd-8a1a-11d4960ff3d1) - [@tanstack/query-example-react-nextjs](https://pkg.pr.new/template/76707c9e-2df7-4de7-9bdc-c7a99b48528f) - [@tanstack/query-example-react-nextjs-app-prefetching](https://pkg.pr.new/template/c466c826-b87f-4bc2-8181-7065a01112a2) - [@tanstack/query-example-nextjs-suspense-streaming](https://pkg.pr.new/template/0fbb50d7-9ba7-44a3-864e-4e7e64070a29) - [@tanstack/query-example-react-offline](https://pkg.pr.new/template/6f64975f-6478-47b9-b93f-cdadc0ec6bf9) - [@tanstack/query-example-react-optimistic-updates-cache](https://pkg.pr.new/template/50dd807f-4299-46e9-bbf0-425d8ab47de3) - [@tanstack/query-example-react-optimistic-updates-ui](https://pkg.pr.new/template/dac251c5-4d5b-4762-96f9-99c856a57b48) - [@tanstack/query-example-react-pagination](https://pkg.pr.new/template/3b8b977c-66d4-462d-a6ce-750039af9bc0) - [@tanstack/query-example-react-playground](https://pkg.pr.new/template/cb7b04ce-d811-43ac-92a6-cf5fdff0642b) - [@tanstack/query-example-react-prefetching](https://pkg.pr.new/template/aaf99546-1f57-4618-a0eb-34cf3f822928) - [@tanstack/query-example-react-react-native](https://pkg.pr.new/template/2c55c406-1ac3-4f67-b7e7-3b4484dc5284) - [@tanstack/query-example-react-router](https://pkg.pr.new/template/5d507770-1cef-4e2b-828c-ba76ef352336) - [@tanstack/query-example-react-rick-morty](https://pkg.pr.new/template/15536c2e-1957-4719-a0f8-82e3b8060525) - [@tanstack/query-example-react-shadow-dom](https://pkg.pr.new/template/c024b1b1-8420-4032-b377-54bb805c76a0) - [@tanstack/query-example-react-simple](https://pkg.pr.new/template/c1aaed43-33d3-451e-b468-91f585c5d3b7) - [@tanstack/query-example-react-star-wars](https://pkg.pr.new/template/bbe5cbaa-407d-4bf9-8122-fb98bbf5a7a9) - [@tanstack/query-example-react-suspense](https://pkg.pr.new/template/84039a10-412f-4c7b-855e-d306a3b0e730) - [@tanstack/query-example-svelte-auto-refetching](https://pkg.pr.new/template/e4147612-38b7-4e6e-b6ac-e3902c4fe841) - [@tanstack/query-example-svelte-basic](https://pkg.pr.new/template/88430eac-3379-45d8-83ed-dce80a719684) - [@tanstack/query-example-svelte-load-more-infinite-scroll](https://pkg.pr.new/template/2eb8d31d-b679-48ee-a67d-558a43a85a39) - [@tanstack/query-example-svelte-optimistic-updates](https://pkg.pr.new/template/c8cc22fc-399b-496e-8cf4-a650c3092f85) - [@tanstack/query-example-svelte-playground](https://pkg.pr.new/template/a94cae83-a933-459a-8fff-4e6c17d695f1) - [@tanstack/query-example-svelte-simple](https://pkg.pr.new/template/ebeac102-9ae0-4ca2-9e88-ea807123c010) - [@tanstack/query-example-svelte-ssr](https://pkg.pr.new/template/a55bb523-7d97-454e-bfbd-f9b9fcd35abd) - [@tanstack/query-example-svelte-star-wars](https://pkg.pr.new/template/285b11b4-b2e6-4ea1-9130-990e6f060da0) - [@tanstack/query-example-vue-2.7-basic](https://pkg.pr.new/template/e781840e-e38c-4693-84e1-95111c1f3e8f) - [@tanstack/query-example-vue-2.6-basic](https://pkg.pr.new/template/11446b2d-2445-47f8-befe-d37988f40380) - [@tanstack/query-example-vue-dependent-queries](https://pkg.pr.new/template/9893b2b1-ba8b-41ec-a8de-9d9314a6cb1b) - [@tanstack/query-example-vue-basic](https://pkg.pr.new/template/0100450a-9473-402b-8e6b-0797ee311110) - [@tanstack/query-example-vue-persister](https://pkg.pr.new/template/b00902f5-bcd7-49ec-ba80-dd60d9f2687c) - [@tanstack/query-example-vue-nuxt3](https://pkg.pr.new/template/63cf5397-4aff-40fe-a9df-1260d246025f) - [@tanstack/query-example-vue-simple](https://pkg.pr.new/template/ba923ac4-a5cd-40a5-b1db-77df5b10098a)

@tanstack/angular-query-devtools-experimental

``` pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8157 ```

@tanstack/angular-query-experimental

``` pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8157 ```

@tanstack/eslint-plugin-query

``` pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8157 ```

@tanstack/query-async-storage-persister

``` pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8157 ```

@tanstack/query-broadcast-client-experimental

``` pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8157 ```

@tanstack/query-core

``` pnpm add https://pkg.pr.new/@tanstack/query-core@8157 ```

@tanstack/query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/query-devtools@8157 ```

@tanstack/query-persist-client-core

``` pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8157 ```

@tanstack/query-sync-storage-persister

``` pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8157 ```

@tanstack/react-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8157 ```

@tanstack/react-query

``` pnpm add https://pkg.pr.new/@tanstack/react-query@8157 ```

@tanstack/react-query-next-experimental

``` pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8157 ```

@tanstack/react-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8157 ```

@tanstack/solid-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8157 ```

@tanstack/solid-query

``` pnpm add https://pkg.pr.new/@tanstack/solid-query@8157 ```

@tanstack/solid-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8157 ```

@tanstack/svelte-query

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query@8157 ```

@tanstack/svelte-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8157 ```

@tanstack/svelte-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8157 ```

@tanstack/vue-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8157 ```

@tanstack/vue-query

``` pnpm add https://pkg.pr.new/@tanstack/vue-query@8157 ```

commit: 2cd4d37

codecov[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 81.89%. Comparing base (2fe16e5) to head (2cd4d37). Report is 18 commits behind head on main.

Additional details and impacted files

[![Impacted file tree graph](https://app.codecov.io/gh/TanStack/query/pull/8157/graphs/tree.svg?width=650&height=150&src=pr&token=jqEbswkEDQ&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack)](https://app.codecov.io/gh/TanStack/query/pull/8157?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) ```diff @@ Coverage Diff @@ ## main #8157 +/- ## =========================================== + Coverage 45.41% 81.89% +36.48% =========================================== Files 200 26 -174 Lines 7456 359 -7097 Branches 1696 99 -1597 =========================================== - Hits 3386 294 -3092 + Misses 3694 56 -3638 + Partials 376 9 -367 ``` | [Components](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | Coverage Δ | | |---|---|---| | [@tanstack/angular-query-devtools-experimental](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/angular-query-experimental](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/eslint-plugin-query](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-async-storage-persister](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-broadcast-client-experimental](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-codemods](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-core](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-persist-client-core](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-sync-storage-persister](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/react-query](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `93.12% <100.00%> (ø)` | | | [@tanstack/react-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `10.00% <ø> (ø)` | | | [@tanstack/react-query-next-experimental](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/react-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `100.00% <ø> (ø)` | | | [@tanstack/solid-query](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/solid-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/solid-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/svelte-query](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/svelte-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/svelte-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/vue-query](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/vue-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8157/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | |

sungpaks commented 1 month ago

I like what you did!

Then how about queryOptions?
UndefinedInitialDataOptions still be like :
initialData?: undefined | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>
just function, does not care about an object

Does this need to be fixed too? @TkDodo @jimmycallin

TkDodo commented 1 month ago

Sure, if we can reproduce a situation that fails, please file a PR with a failing test and a fix :)

ipanasenko commented 1 month ago

Should this work in infiniteQueryOptions + useSuspenseInfiniteQuery combo? It works fine when passing query config directly, but when using infiniteQueryOptions - TS fails. https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMDKazoHYYCSeAZsHsDOgIrLpQCeANHOWRVbfQwPJgzAIBOAF84JKBBBwARAAEYAQwJKAxgGsA9FHSLVMALQBHOoxkBuAFCWSyPPsF44MABY1Tvfo9QAKJOUpgRQAbABFFJVEALkRWDiCwiMUAfhikdAAPRXBg9BiYKDpRUQBKREs4OB0YZCgnNgDODz4BIV8ECsq4E24AaXQGGIBtGUzssFyZAF0mTsqexgAxPBjFVAZ7OB8ygF4APjjAkPClWa7DgWOkmMaEk8U5ruTYsEUAc3RUYdurpRm4V4fAAKiig2S+cCGU1Ej0qMTsABN0Ox0Aizl0PjAAHKZGAg4Gg7IxbZwfZwACM6MqP2C+PQILBIBilM6IhKVhE1ls9laTjQ6AA6mCwLgoFxGOS-Bc7klorEafdUrExjk8s5CuhimzypVqrU+RhsKhcAR0MR2JR3Nw-I8Fgx+oNIaMsqrplTuh5lqt1psSWSFUl3QGlDd4r8HudKs8kIDPt8w4k-ixYwzwcNoZzI3B4XgkSi0Y9MTiMnj3vTCUytrsDizzjS6anK7XShyuXYHEIUBghYoRfRxQwAExS4OKOX+BOKtJwFUTNUFIpibUdXXoGp1LtYHD4IikRpWxg+VwHzy89qjtnsywiIA

Let me know if I need to open separate issue regarding this

TanStack / query

fix(react-query): Allow optional initialData object in infiniteQueryOptions #8157

☁️ Nx Cloud Report

Codecov Report