feat: add support for `React.use()` #7988

KATT · 2024-08-30T10:50:09Z

Progress

add basic functionality for useQuery()
make other tests pass (👋 help wanted!)
add test for useInfiniteQuery()
do more tests with some example
update docs?

nx-cloud · 2024-08-30T10:50:41Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cb0dfb4. 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 2 targets

Sent with 💌 from NxCloud.

pkg-pr-new · 2024-08-30T10:52:36Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/angular-query-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-devtools

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

@tanstack/query-core

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/solid-query

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: cb0dfb4

packages/query-core/src/queryObserver.ts

KATT · 2024-09-27T14:58:06Z

I added some docs

docs/reference/QueryClient.md

docs/framework/react/reference/queryOptions.md

TkDodo

@Ephem are you good with shipping this?

TkDodo · 2024-10-01T15:33:46Z

since the whole feature is experimental (you need to opt into experimental_prefetchInRender for it to work), we can ship it and iterate later 🎉

@KATT

@KATT

@KATT

timvandam · 2025-02-19T11:52:00Z

Hi @KATT, I came across the experimental_prefetchInRender property and think it would be a nice addition to allow prefetching during server-side rendering. Currently the prefetch branch is guarded with !isServer:

query/packages/react-query/src/useBaseQuery.ts

Lines 144 to 159 in d07a3db

    
           if ( 
        
             defaultedOptions.experimental_prefetchInRender && 
        
             !isServer && 
        
             willFetch(result, isRestoring) 
        
           ) { 
        
             const promise = isNewCacheEntry 
        
               ? // Fetch immediately on render in order to ensure `.promise` is resolved even if the component is unmounted 
        
                 fetchOptimistic(defaultedOptions, observer, errorResetBoundary) 
        
               : // subscribe to the "cache promise" so that we can finalize the currentThenable once data comes in 
        
                 client.getQueryCache().get(defaultedOptions.queryHash)?.promise 
        
             promise?.catch(noop).finally(() => { 
        
               // `.updateResult()` will trigger `.#currentThenable` to finalize 
        
               observer.updateResult() 
        
             }) 
        
           }

Changing the type from boolean to e.g. boolean | 'server' | 'client' | 'all' would make it very easy to set up server-side rendering in Vite based setups that don't use suspense by simply waiting for fetches to resolve (eg like this https://github.com/timvandam/react-vite-trpc-ssr/blob/main/src/entry.server.tsx#L50-L68). What do you think?

github-actions bot added package: react-query package: query-core labels Aug 30, 2024

TkDodo reviewed Aug 30, 2024

View reviewed changes

packages/query-core/src/queryObserver.ts Outdated Show resolved Hide resolved

This comment was marked as outdated.

Sign in to view

KATT closed this Aug 31, 2024

KATT reopened this Sep 1, 2024

let’s do it again

8cbd6a0

KATT force-pushed the discussions-7980-promises branch from ec583d5 to 8cbd6a0 Compare September 1, 2024 19:32

KATT added 4 commits September 1, 2024 21:34

fix test group

739d023

maybe

7fe1d33

mkay

757aeab

cool

7c88325

This comment was marked as outdated.

Sign in to view

KATT added 3 commits September 1, 2024 23:27

rm console.logs

c2a2cb5

mkay

d290fca

mkay

da88d68

add docs

402a9d3

github-actions bot added the documentation Improvements or additions to documentation label Sep 27, 2024

KATT added 2 commits September 27, 2024 16:51

align

3a6e344

tweak

1ef234c

KATT commented Sep 27, 2024

View reviewed changes

docs/reference/QueryClient.md Outdated Show resolved Hide resolved

Update docs/reference/QueryClient.md

7ea970a

TkDodo reviewed Sep 28, 2024

View reviewed changes

docs/framework/react/reference/queryOptions.md Outdated Show resolved Hide resolved

Update docs/framework/react/reference/queryOptions.md

9e05c95

TkDodo approved these changes Sep 28, 2024

View reviewed changes

Merge branch 'main' into discussions-7980-promises

cb0dfb4

TkDodo merged commit 18953be into TanStack:main Oct 1, 2024
8 checks passed

KATT deleted the discussions-7980-promises branch October 1, 2024 18:51

jxom mentioned this pull request Oct 8, 2024

fix: new cache entry check #8151

Merged

phonzammi mentioned this pull request Oct 14, 2024

chore(deps): update all non-major dependencies vikejs/vike-solid#130

Merged

1 task

zntb mentioned this pull request Oct 25, 2024

[Snyk] Upgrade @tanstack/react-query from 5.56.2 to 5.59.0 zntb/ReactEvents-With-TanStack-Query#30

Merged

aliakseikrauchanka mentioned this pull request Oct 25, 2024

[Snyk] Upgrade @tanstack/react-query from 5.51.21 to 5.59.0 aliakseikrauchanka/lifeis#33

Open

dn54321 mentioned this pull request Oct 28, 2024

[Snyk] Upgrade @tanstack/react-query-devtools from 5.55.0 to 5.59.0 dn54321/Weaget#6

Open

jwinr mentioned this pull request Oct 28, 2024

[Snyk] Upgrade @tanstack/react-query from 5.56.2 to 5.59.0 jwinr/threadly#30

Merged

Bancha-t mentioned this pull request Oct 31, 2024

[Snyk] Upgrade @tanstack/react-query from 5.59.0 to 5.59.8 Bancha-t/myweb#4

Open

Bonniemarie216 mentioned this pull request Oct 31, 2024

[Snyk] Upgrade @tanstack/react-query from 5.50.1 to 5.59.9 Bonniemarie216/seamless-interface#6

Open

zntb mentioned this pull request Nov 1, 2024

[Snyk] Upgrade @tanstack/react-query from 5.59.0 to 5.59.9 zntb/ReactEvents-With-TanStack-Query#31

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add support for `React.use()` #7988

feat: add support for `React.use()` #7988

KATT commented Aug 30, 2024 •

edited by TkDodo

Loading

nx-cloud bot commented Aug 30, 2024 •

edited

Loading

pkg-pr-new bot commented Aug 30, 2024 •

edited

Loading

This comment was marked as outdated.

This comment was marked as outdated.

KATT commented Sep 27, 2024

TkDodo left a comment

TkDodo commented Oct 1, 2024

timvandam commented Feb 19, 2025

feat: add support for React.use() #7988

feat: add support for React.use() #7988

Conversation

KATT commented Aug 30, 2024 • edited by TkDodo Loading

Progress

nx-cloud bot commented Aug 30, 2024 • edited Loading

☁️ Nx Cloud Report

pkg-pr-new bot commented Aug 30, 2024 • edited Loading

This comment was marked as outdated.

This comment was marked as outdated.

KATT commented Sep 27, 2024

TkDodo left a comment

Choose a reason for hiding this comment

TkDodo commented Oct 1, 2024

timvandam commented Feb 19, 2025

feat: add support for `React.use()` #7988

feat: add support for `React.use()` #7988

KATT commented Aug 30, 2024 •

edited by TkDodo

Loading

nx-cloud bot commented Aug 30, 2024 •

edited

Loading

pkg-pr-new bot commented Aug 30, 2024 •

edited

Loading