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

Add possibility to pass a callback to enabled. #7566

Merged
merged 12 commits into from
Jun 25, 2024
Merged

Conversation

lotusjohn
Copy link
Contributor

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

Copy link

vercel bot commented Jun 14, 2024

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

Copy link

codesandbox-ci bot commented Jun 14, 2024

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
Copy link
Contributor

flodlc commented Jun 16, 2024

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.

Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

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

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:

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?

Copy link

nx-cloud bot commented Jun 21, 2024

☁️ 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

Sent with 💌 from NxCloud.

@lotusjohn lotusjohn requested a review from TkDodo June 24, 2024 12:06
@TkDodo
Copy link
Collaborator

TkDodo commented Jun 24, 2024

can you also add updates to the api docs please ?

Copy link

codecov bot commented Jun 24, 2024

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

Impacted file tree graph

@@             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 lotusjohn requested a review from TkDodo June 24, 2024 14:16
@github-actions github-actions bot added the documentation Improvements or additions to documentation label Jun 24, 2024
@lotusjohn
Copy link
Contributor Author

lotusjohn commented Jun 24, 2024

can you also add updates to the api docs please ?

Yes, updated docs as well now.

Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

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

looks really good 👏

packages/query-core/src/__tests__/queryObserver.test.tsx Outdated Show resolved Hide resolved
@TkDodo
Copy link
Collaborator

TkDodo commented Jun 24, 2024

ah, just noticed:

  • api docs needs an update here:
    - `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:
    /**
    * 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
Copy link
Contributor Author

lotusjohn commented Jun 24, 2024

ah, just noticed:

  • api docs needs an update here:
    - `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:
    /**
    * 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
Copy link
Collaborator

TkDodo commented Jun 25, 2024

eslint is failing - please have a look

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

@lotusjohn
Copy link
Contributor Author

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.

@TkDodo TkDodo merged commit 31b9ab4 into TanStack:main Jun 25, 2024
7 checks passed
n0099 added a commit to n0099/open-tbm that referenced this pull request Jun 28, 2024
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation package: query-core
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants