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

fix(vue-query): invalidate queries immediately after call invalidateQueries #7930

Merged

Conversation

Mini-ghost
Copy link
Contributor

@Mini-ghost Mini-ghost commented Aug 21, 2024

Resolve #7694

Originally, when we called queryClient.invalidateQueries from @tanstack/vue-query, it would trigger invalidateQueries from @tanstack/query-core in the next macro task.

This was initially intended to fix issue #6414, but it caused an inconsistency with the documentation. Users would receive unexpected values when reading query.isInvalidated after calling queryClient.invalidateQueries.

In this PR, we have deferred only the internal call to refetchQueries within queryClient.invalidateQueries, ensuring that the state changes immediately without affecting the parameters received by the queryFn.

cc: @kazcw

@Mini-ghost Mini-ghost marked this pull request as draft August 21, 2024 00:18
Copy link

nx-cloud bot commented Aug 21, 2024

☁️ Nx Cloud Report

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

Copy link

pkg-pr-new bot commented Aug 21, 2024

commit: f7af52d

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

Open in Stackblitz

More templates

Copy link

codecov bot commented Aug 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.94%. Comparing base (4977296) to head (f7af52d).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##           main    #7930       +/-   ##
=========================================
+ Coverage      0   71.94%   +71.94%     
=========================================
  Files         0       19       +19     
  Lines         0      467      +467     
  Branches      0      121      +121     
=========================================
+ Hits          0      336      +336     
- Misses        0      101      +101     
- Partials      0       30       +30     
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental ∅ <ø> (∅)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister ∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core ∅ <ø> (∅)
@tanstack/query-devtools ∅ <ø> (∅)
@tanstack/query-persist-client-core ∅ <ø> (∅)
@tanstack/query-sync-storage-persister ∅ <ø> (∅)
@tanstack/react-query ∅ <ø> (∅)
@tanstack/react-query-devtools ∅ <ø> (∅)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client ∅ <ø> (∅)
@tanstack/solid-query ∅ <ø> (∅)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client ∅ <ø> (∅)
@tanstack/svelte-query ∅ <ø> (∅)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client ∅ <ø> (∅)
@tanstack/vue-query 71.94% <100.00%> (∅)
@tanstack/vue-query-devtools ∅ <ø> (∅)

@Mini-ghost Mini-ghost marked this pull request as ready for review August 25, 2024 14:16
@DamianOsipiuk DamianOsipiuk merged commit c91c720 into TanStack:main Sep 1, 2024
8 checks passed
@Mini-ghost Mini-ghost deleted the fix/invalidate-query-immediately branch September 1, 2024 22:27
KATT pushed a commit to KATT/react-query that referenced this pull request Sep 2, 2024
…ateQueries` (TanStack#7930)

* fix(vue-query): invalidate queries immediately after call `invalidateQueries`

* chore: recovery code comments
TkDodo added a commit that referenced this pull request Oct 1, 2024
* let’s do it again

* fix test group

* maybe

* mkay

* cool

* rm console.logs

* mkay

* mkay

* fix(vue-query): invalidate queries immediately after calling `invalidateQueries` (#7930)

* fix(vue-query): invalidate queries immediately after call `invalidateQueries`

* chore: recovery code comments

* release: v5.53.2

* docs(vue-query): update SSR guide for nuxt2 (#8001)

* docs: update SSR guide for nuxt2

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* thenable

* mkay

* Update packages/react-query/src/__tests__/useQuery.test.tsx

* mkay

* mkay

* faster and more consistent

* mkay

* mkay

* mkay

* mkay

* mkay

* fix unhandled rejections

* more

* more

* mkay

* fix more

* fixy

* cool

* Update packages/react-query/package.json

* fix: track data property if `promise` is tracked

if users use the `promise` returned from useQuery, they are actually interested in the `data` it unwraps to. Since the promise doesn't change when data resolves, we would likely miss a re-render

* Revert "fix: track data property if `promise` is tracked"

This reverts commit d1184ba.

* add test case that @TkDodo was concerned about

* tweak

* mkay

* add `useInfiniteQuery()` test

* consistent testing

* better test

* rm comment

* test resetting errror boundary

* better test

* cool

* cool

* more test

* mv cleanup

* mkay

* some more things

* add fixme

* fix types

* wat

* fixes

* revert

* fix

* colocating doesn’t workkk

* mkay

* mkay

* might work

* more test

* cool

* i don’t know hwat i’m doing

* mocky

* lint

* space

* rm log

* setIsServer

* mkay

* ffs

* remove unnecessary stufffff

* tweak more

* just naming and comments

* tweak

* fix: use fetchOptimistic util instead of observer.fetchOptimistic

* refactor: make sure to only trigger fetching during render if we really have no cache entry yet

* fix: move the `isNewCacheEntry` check before observer creation

* chore: avoid rect key warnings

* fix: add an `updateResult` for all observers to finalize currentThenable

* chore: logs during suspense errors

* fix: empty catch

* feature flag

* add comment

* simplify

* omit from suspense

* feat flag

* more tests

* test: scope experimental_promise to useQuery().promise tests

* refactor: rename to experimental_prefetchInRender

* test: more tests

* test: more cancelation

* fix cancellation

* make it work

* tweak comment

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

* simplify code a bit

* Update packages/query-core/src/queryObserver.ts

* refactor: move experimental_prefetchInRender check until after the early bail-out

* fix: when cancelled, the promise should stay pending

* test: disabled case

* chore: no idea what's going on

* refactor: delete unnecessary check

* revert refactor i did for cancellation when we wanted it to `throw`

* add docs

* align

* tweak

* Update docs/reference/QueryClient.md

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

---------

Co-authored-by: Alex Liu <dsa1314@gmail.com>
Co-authored-by: Tanner Linsley <tannerlinsley@users.noreply.github.com>
Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

vue-query client invalidateQueries doesn't invalidate immediately
2 participants