Add possibility to pass a callback to enabled. #7566

lotusjohn · 2024-06-14T13:54:05Z

We are using tanstack query in react native, and i have tried to implement a way to refetch all active queries in the focused screen.

In react native all screens remains mounted even when navigating to a new screen, and thus its easy to accidentally re-render out of focus screens, as well as accidentally refetching out of focus queries.

notifyOnChange props solved the problem with re-renders.
This helpes to be able to use invalidateQueries in for example pull to refresh when we dont want to have to specify exactly which queries should or should not be refetched on invalidation.

As it is today, we are forced to trigger re-renders when navigation to set enabled to true or false to be able to do this, but its costly to rerender screens on navigation and especially the ones going out of focus

Related discussion and PR
#5734

@paulobmarcos @TkDodo

vercel · 2024-06-14T13:54:11Z

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jun 25, 2024 2:03pm

codesandbox-ci · 2024-06-14T13:56:13Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 034bb63:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

flodlc · 2024-06-16T08:56:51Z

Definitely something that would improve tanstack query a lot on react-native. So glad this PR exists!
My concern is whether it triggers a refetch as enabled: false/true does.
Perhaps a programmatic setEnabled(state: boolean) call could achieve this? It would follow the same pattern as focusManager but be scoped to a single query.

TkDodo

I'm not against this, I just think I tried this some time ago and it wasn't that trivial.

Usually, we'd want those functions to accept the query itself, and not just be a function without an argument. I recently did this for staleTime and put that into a shared utils:

query/packages/query-core/src/utils.ts

Lines 91 to 101 in 96a743e

    
           export function resolveStaleTime< 
        
             TQueryFnData = unknown, 
        
             TError = DefaultError, 
        
             TData = TQueryFnData, 
        
             TQueryKey extends QueryKey = QueryKey, 
        
           >( 
        
             staleTime: undefined | StaleTime<TQueryFnData, TError, TData, TQueryKey>, 
        
             query: Query<TQueryFnData, TError, TData, TQueryKey>, 
        
           ): number | undefined { 
        
             return typeof staleTime === 'function' ? staleTime(query) : staleTime 
        
           }

can you try to refactor this into the same direction?

nx-cloud · 2024-06-21T08:49:08Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 034bb63. 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:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

Sent with 💌 from NxCloud.

… use of a resolveEnabled util function

packages/query-core/src/__tests__/queryObserver.test.tsx

TkDodo · 2024-06-24T12:35:57Z

can you also add updates to the api docs please ?

codecov · 2024-06-24T12:39:30Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.40%. Comparing base (fbfe940) to head (034bb63).
Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #7566       +/-   ##
===========================================
+ Coverage   43.95%   62.40%   +18.44%     
===========================================
  Files         185      125       -60     
  Lines        7037     4495     -2542     
  Branches     1540     1239      -301     
===========================================
- Hits         3093     2805      -288     
+ Misses       3578     1459     -2119     
+ Partials      366      231      -135

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`86.58% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`43.85% <ø> (ø)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`92.82% <100.00%> (+0.02%)`	⬆️
@tanstack/query-devtools	`5.24% <ø> (ø)`
@tanstack/query-persist-client-core	`57.73% <ø> (ø)`
@tanstack/query-sync-storage-persister	`82.50% <ø> (ø)`
@tanstack/react-query	`92.93% <ø> (ø)`
@tanstack/react-query-devtools	`10.71% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`100.00% <ø> (ø)`
@tanstack/solid-query	`78.06% <ø> (ø)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`100.00% <ø> (ø)`
@tanstack/svelte-query	`68.66% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`70.60% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

lotusjohn · 2024-06-24T14:34:39Z

can you also add updates to the api docs please ?

Yes, updated docs as well now.

TkDodo

looks really good 👏

packages/query-core/src/__tests__/queryObserver.test.tsx

TkDodo · 2024-06-24T14:38:57Z

ah, just noticed:

api docs needs an update here:

query/docs/framework/react/reference/useQuery.md

Lines 73 to 75 in 96a743e

    
           - `enabled: boolean` 
        
             - Set this to `false` to disable this query from automatically running. 
        
             - Can be used for [Dependent Queries](../../guides/dependent-queries).

and jsdocs here:

query/packages/query-core/src/types.ts

Lines 255 to 260 in 5bda18f

    
             /** 
        
              * Set this to `false` to disable automatic refetching when the query mounts or changes query keys. 
        
              * To refetch the query, use the `refetch` method returned from the `useQuery` instance. 
        
              * Defaults to `true`. 
        
              */ 
        
             enabled?: boolean

lotusjohn · 2024-06-24T14:53:28Z

ah, just noticed:

api docs needs an update here:

query/docs/framework/react/reference/useQuery.md

Lines 73 to 75 in 96a743e

- `enabled: boolean`

- Set this to `false` to disable this query from automatically running.

- Can be used for [Dependent Queries](../../guides/dependent-queries).

and jsdocs here:

query/packages/query-core/src/types.ts

Lines 255 to 260 in 5bda18f

/**

* Set this to `false` to disable automatic refetching when the query mounts or changes query keys.

* To refetch the query, use the `refetch` method returned from the `useQuery` instance.

* Defaults to `true`.

*/

enabled?: boolean

Fixed! Does it look good like that?

TkDodo · 2024-06-25T09:06:57Z

eslint is failing - please have a look

https://cloud.nx.app/runs/O9IbYCGg8Y?utm_source=pull-request&utm_medium=comment

lotusjohn · 2024-06-25T13:11:36Z

eslint is failing - please have a look

https://cloud.nx.app/runs/O9IbYCGg8Y?utm_source=pull-request&utm_medium=comment

Thanks for letting me know! Pushed some lint fixes now.

…TanStack/query#7566 @ `useApi*()` * now typing `queryKey` of `UseInfiniteQueryOptions` @ `useApiWithCursor()` @ api/index.ts * fix now showing user `displayName` when its name is `null`, introduced in 62e1a5e @ `<ReplyItem>` * fix hydration node mistmatch in `<AMenuItem key="list">` when switching from query with empty param to non-empty @ pages/posts.vue @ fe

Add possibility to pass a callback to enabled.

2dc373b

github-actions bot added the package: query-core label Jun 14, 2024

TkDodo reviewed Jun 21, 2024

View reviewed changes

Merge branch 'main' into main

8fde875

Refactor into using the same pattern as resolving staletime, with the…

3101d1a

… use of a resolveEnabled util function

lotusjohn requested a review from TkDodo June 24, 2024 12:06

Merge branch 'main' into main

a9ad001

TkDodo reviewed Jun 24, 2024

View reviewed changes

packages/query-core/src/__tests__/queryObserver.test.tsx Outdated Show resolved Hide resolved

John Pettersson added 2 commits June 24, 2024 16:13

Update tests for enabled option as a callback

108101e

Merge branch 'main' of https://github.com/lotusjohn/query

337d444

lotusjohn requested a review from TkDodo June 24, 2024 14:16

update docs

ba70128

github-actions bot added the documentation Improvements or additions to documentation label Jun 24, 2024

TkDodo approved these changes Jun 24, 2024

View reviewed changes

packages/query-core/src/__tests__/queryObserver.test.tsx Outdated Show resolved Hide resolved

John Pettersson added 2 commits June 24, 2024 16:43

remove typo

4ec03e8

Update enabled type in docs

4fcc32f

remove duplicated test case

7ed736a

Fix eslint errors

8c9b5a6

Merge branch 'main' into main

034bb63

TkDodo merged commit 31b9ab4 into TanStack:main Jun 25, 2024
7 checks passed

n0099 mentioned this pull request Jun 28, 2024

invoking suspense() with enabled: false will wait infinite while ssr #7609

Closed

This was referenced Jul 17, 2024

[Snyk] Upgrade @tanstack/react-query from 5.45.1 to 5.48.0 mong/mongts#2784

Closed

[Snyk] Upgrade @tanstack/react-query-devtools from 5.45.1 to 5.48.0 mong/mongts#2785

Closed

This was referenced Jul 17, 2024

[Snyk] Upgrade @tanstack/react-query-devtools from 5.24.6 to 5.48.0 eryn-muetzel/realworld-playground#5

Open

[Snyk] Upgrade @tanstack/react-query from 5.24.6 to 5.48.0 eryn-muetzel/realworld-playground#6

Open

mattschoch mentioned this pull request Jul 17, 2024

[Snyk] Upgrade @tanstack/react-query from 5.24.1 to 5.48.0 narval-xyz/armory#436

Closed

CalPinSW mentioned this pull request Jul 21, 2024

[Snyk] Upgrade @tanstack/react-query from 5.48.0 to 5.49.0 CalPinSW/playlist-manager#37

Closed

snyk-io bot mentioned this pull request Jul 22, 2024

[Snyk] Upgrade @tanstack/react-query from 4.36.1 to 5.49.2 WontonSam/jsoncrack.com#15

Open

Samad2011s mentioned this pull request Jul 28, 2024

[Snyk] Upgrade @tanstack/vue-query from 5.17.8 to 5.50.1 Samad2011s/website#1

Open

Jak-Ch-ll mentioned this pull request Aug 15, 2024

[vue-query] Callback for enabled does not provide query as parameter #7905

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add possibility to pass a callback to enabled. #7566

Add possibility to pass a callback to enabled. #7566

lotusjohn commented Jun 14, 2024

vercel bot commented Jun 14, 2024 •

edited

Loading

codesandbox-ci bot commented Jun 14, 2024 •

edited

Loading

flodlc commented Jun 16, 2024 •

edited

Loading

TkDodo left a comment

nx-cloud bot commented Jun 21, 2024 •

edited

Loading

TkDodo commented Jun 24, 2024

codecov bot commented Jun 24, 2024 •

edited

Loading

lotusjohn commented Jun 24, 2024 •

edited

Loading

TkDodo left a comment

TkDodo commented Jun 24, 2024

lotusjohn commented Jun 24, 2024 •

edited

Loading

TkDodo commented Jun 25, 2024

lotusjohn commented Jun 25, 2024

	export function resolveStaleTime<
	TQueryFnData = unknown,
	TError = DefaultError,
	TData = TQueryFnData,
	TQueryKey extends QueryKey = QueryKey,
	>(
	staleTime: undefined \| StaleTime<TQueryFnData, TError, TData, TQueryKey>,
	query: Query<TQueryFnData, TError, TData, TQueryKey>,
	): number \| undefined {
	return typeof staleTime === 'function' ? staleTime(query) : staleTime
	}

Add possibility to pass a callback to enabled. #7566

Add possibility to pass a callback to enabled. #7566

Conversation

lotusjohn commented Jun 14, 2024

vercel bot commented Jun 14, 2024 • edited Loading

codesandbox-ci bot commented Jun 14, 2024 • edited Loading

flodlc commented Jun 16, 2024 • edited Loading

TkDodo left a comment

Choose a reason for hiding this comment

nx-cloud bot commented Jun 21, 2024 • edited Loading

☁️ Nx Cloud Report

TkDodo commented Jun 24, 2024

codecov bot commented Jun 24, 2024 • edited Loading

Codecov Report

lotusjohn commented Jun 24, 2024 • edited Loading

TkDodo left a comment

Choose a reason for hiding this comment

TkDodo commented Jun 24, 2024

lotusjohn commented Jun 24, 2024 • edited Loading

TkDodo commented Jun 25, 2024

lotusjohn commented Jun 25, 2024

vercel bot commented Jun 14, 2024 •

edited

Loading

codesandbox-ci bot commented Jun 14, 2024 •

edited

Loading

flodlc commented Jun 16, 2024 •

edited

Loading

nx-cloud bot commented Jun 21, 2024 •

edited

Loading

codecov bot commented Jun 24, 2024 •

edited

Loading

lotusjohn commented Jun 24, 2024 •

edited

Loading

lotusjohn commented Jun 24, 2024 •

edited

Loading