fix(useQueries): search for unused observers if keepPreviousData (#2680) #2866

jvuoti · 2021-11-01T20:50:10Z

When keepPreviousData is on, search for a query observer no longer used instead of relying on observer order and indexing. Trying to match observers by index could cause infinite request loops when switching queries. See #2680 for more

This does complicate the getOptimisticResult and updateObservers calls a bit. Now they both essentially do the same search for unused observers. The observers lists for the queriesObserver are only updated in the updateObservers, though.

This does cause some extra updates, as can be seen in the tests. If I understand correctly, they probably are due to the setOptions calls being called both on getOptimisticResult and updateObservers calls. I tried for quite a while to get rid of the extra updates, but couldn't find a way that would still always return previous data, so eventually just left it like this and edited the tests. Any ideas to get rid of the extra updates are very welcome 😊

vercel · 2021-11-01T20:50:14Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tanstack/react-query/2UFSK4PWKCxrbTt2GSp7rDN7cFJ3
✅ Preview: https://react-query-git-fork-jvuoti-fixusequeriesinfini-ae7ee3-tanstack.vercel.app

codesandbox-ci · 2021-11-01T20:53:48Z

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 296dbea:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

TkDodo

thank you. Regarding the extra re-renders: Are these only happening if we also have keepPreviousData: true on the queries, or are all queries affected? Judging from the unchanged tests, things should stay the same for keepPreviousData: false, right?

src/core/utils.ts

src/core/queriesObserver.ts

TkDodo · 2021-11-06T14:52:12Z

When keepPreviousData is on, search for a query observer no longer used instead of relying on observer order and indexing. Trying to match observers by index could cause infinite request loops when switching queries. See #2680 for more

I'm not yet fully understanding how you're actually matching the observers together if not by index 🤔

also, prettier formatting is failing, please have a look 👀

jvuoti · 2021-11-07T09:52:02Z

Thank you for the comments, good points, I now fixed the namings and formatting.

And oh yeah, you are right that this still fulfills the observer for previous data by index 😅 Just now the indexing is done from the list of observers that are no longer being used.

Previously the code fulfilled the observer by index from the main observer list, assuming the order of the queries would have stayed the same. However, that was not always the case when e.g. toggling queries off and on. This could then cause the same observer being returned first to an existing query (by hash) and then to a new query as previous data (by index), causing the infinite request loop. The new test should test for this issue.

The matching could be more advanced, to e.g. try to find the nearest match of the query key parts. However, this now at least should fix the biggest issue of infinite request loops. It also fulfills our use case of toggling between similar queries, with only an identifier being changed.

The extra re-renders do happen only when keepPreviousData is turned on. If I have understood correctly, this happens because now the getOptimisticResults also needs to call the same search and update code as updateObservers. Because getOptimisticResults does not update the internal observer map caches, firstObserver.setOptions gets called twice. This then seems to trigger the listeners also twice, even if the getOptimisticResults has left the notifyOptions undefined - or even when explicitly setting all the options false.

codecov · 2021-11-07T19:27:43Z

Codecov Report

Merging #2866 (296dbea) into master (7948e7a) will increase coverage by 0.03%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #2866      +/-   ##
==========================================
+ Coverage   96.41%   96.44%   +0.03%     
==========================================
  Files          45       45              
  Lines        2229     2248      +19     
  Branches      638      639       +1     
==========================================
+ Hits         2149     2168      +19     
  Misses         77       77              
  Partials        3        3

Impacted Files	Coverage Δ
src/core/queriesObserver.ts	`100.00% <100.00%> (ø)`
src/core/queryObserver.ts	`100.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2714343...296dbea. Read the comment docs.

src/core/queriesObserver.ts

TkDodo · 2021-11-12T13:19:54Z

can you please update with the latest master, as we've added some more tests. And please make sure that the test coverage does not drop (it currently does, see the codecov report)

src/core/queriesObserver.ts

TkDodo

can you please add a useQueries test for the initial issue, the infinite render loop? Thanks.

src/core/queriesObserver.ts

TanStack#2680) When keepPreviousData is on, search for a query observer no longer used instead of relying on observer order and indexing. Trying to match observers by index could cause infinite request loops when switching queries.

You apparently can skip giving a queryKey, when given via options. It will also work, somewhat. All falsy queryKeys will match the same observer, so if you only have a single query with undefined key, it will return the expected value

This removes extra calls to setOptions from getOptimisticResult, and gets rid of extra renders in tests. setOptions is now explicitly only called in updateObservers.

This way no extra utils need to be added.

jvuoti · 2021-11-17T20:00:07Z

can you please add a useQueries test for the initial issue, the infinite render loop? Thanks.

The "should keep previous data when switching between queries" test added to useQueries.test does test the infinite render loop issue as a side effect: if you run that test against master, the expect on line 296 will fail, because there are going to be over 250 result states in the list 😬

But good point, it would be nice to have a simpler test explicitly for that issue. If needed, I can probably look at that over the weekend.

TkDodo · 2021-11-17T20:11:06Z

But good point, it would be nice to have a simpler test explicitly for that issue. If needed, I can probably look at that over the weekend.

that would be great, thanks

jvuoti · 2021-11-21T19:45:06Z

Now added a test explicitly for the infinite render loop when toggling queries on and off, i.e. the initial issue from the bug report. It is still a bit cumbersome to set up and validate the issue, unfortunately couldn't find a way to get it much simpler than that.

TkDodo

Thank you, I'm going to trust the test and merge this. Also went a bit through the logic and I think it's pretty readable now 🚀

tannerlinsley · 2021-11-26T20:10:26Z

🎉 This PR is included in version 3.33.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

TkDodo · 2021-12-04T17:39:04Z

src/core/queriesObserver.ts

-      return this.getObserver(defaultedOptions, index).getOptimisticResult(
-        defaultedOptions
-      )
-    })
+    return this.findMatchingObservers(queries).map(match =>
+      match.observer.getCurrentResult()
+    )


quick follow-up question here @jvuoti : previously, we called getOptimisticResult of each observer, and now we just call getCurrentResult(). I'm surprised that this doesn't seem to make a difference 🤔 ...

Ah, you are right, it should call getOptimisticResult there, so that is a bug. Sorry, must have been some lazy copy-pasting on my part when refactoring the code around. 🤦

Testing this out quickly, the change does not seem to cause any visible effects - but it does now fix the issue I had with some of the existing tests still returning isFetching: false. So yeah, I probably should have noticed the issue from those tests. But at least now I can revert the tests back to the original, correct form 😅

So good catch, thank you so much! I'll prep a PR to fix the call and tests shortly.

Thank you 🙏

Fix queriesObserver to call getOptimisticResult as before. This was a bug introduced in PR TanStack#2866

…rvers (#3052) * fix(queriesObserver): fix getOptimisticResult call Fix queriesObserver to call getOptimisticResult as before. This was a bug introduced in PR #2866 * fix(queriesObserver): return observers in same order as queries Sort returned observer entries to match the order of queries. Previously, with keepPreviousData: true, the repurposed observers would be returned last, potentially in different order than the queries.

vercel bot deployed to Preview November 1, 2021 20:50 View deployment

TkDodo reviewed Nov 6, 2021

View reviewed changes

src/core/utils.ts Outdated Show resolved Hide resolved

src/core/queriesObserver.ts Outdated Show resolved Hide resolved

jvuoti force-pushed the fix_usequeries_infinite_request_loop branch from 4096064 to 4a7b40c Compare November 7, 2021 09:46

vercel bot deployed to Preview November 7, 2021 09:47 View deployment

TkDodo reviewed Nov 7, 2021

View reviewed changes

src/core/queriesObserver.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 10, 2021 20:17 View deployment

vercel bot deployed to Preview November 11, 2021 06:11 View deployment

TkDodo requested changes Nov 12, 2021

View reviewed changes

src/core/queriesObserver.ts Outdated Show resolved Hide resolved

src/core/queriesObserver.ts Outdated Show resolved Hide resolved

jvuoti force-pushed the fix_usequeries_infinite_request_loop branch from 56ab488 to d5b78fe Compare November 14, 2021 20:40

vercel bot deployed to Preview November 14, 2021 20:40 View deployment

jvuoti force-pushed the fix_usequeries_infinite_request_loop branch from d5b78fe to 8a4823b Compare November 14, 2021 20:41

vercel bot deployed to Preview November 14, 2021 20:41 View deployment

TkDodo requested changes Nov 17, 2021

View reviewed changes

src/core/queriesObserver.ts Outdated Show resolved Hide resolved

jvuoti added 6 commits November 17, 2021 21:43

Fix namings and formatting

7d10fbe

Support undefined queryKeys in getUpdatedObservers

4af548e

You apparently can skip giving a queryKey, when given via options. It will also work, somewhat. All falsy queryKeys will match the same observer, so if you only have a single query with undefined key, it will return the expected value

Switched to non-null assertion for consistency

f2c5c02

Refactor to findMatchingObservers

a9bd6f3

This removes extra calls to setOptions from getOptimisticResult, and gets rid of extra renders in tests. setOptions is now explicitly only called in updateObservers.

Replace array type guard with flatmap

cc1f1b2

This way no extra utils need to be added.

jvuoti force-pushed the fix_usequeries_infinite_request_loop branch from 8a4823b to cc1f1b2 Compare November 17, 2021 19:44

vercel bot deployed to Preview November 17, 2021 19:44 View deployment

Add test for infinite render loops when toggling queries

296dbea

vercel bot deployed to Preview November 21, 2021 19:39 View deployment

TkDodo approved these changes Nov 26, 2021

View reviewed changes

TkDodo merged commit c51498a into TanStack:master Nov 26, 2021

tannerlinsley added the released label Nov 26, 2021

TkDodo reviewed Dec 4, 2021

View reviewed changes

jvuoti added a commit to jvuoti/react-query that referenced this pull request Dec 4, 2021

fix(queriesObserver): fix getOptimisticResult call

f215471

Fix queriesObserver to call getOptimisticResult as before. This was a bug introduced in PR TanStack#2866

jvuoti mentioned this pull request Dec 4, 2021

fix(queriesObserver): fix getOptimisticResult, order of returned observers #3052

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(useQueries): search for unused observers if keepPreviousData (#2680) #2866

fix(useQueries): search for unused observers if keepPreviousData (#2680) #2866

jvuoti commented Nov 1, 2021 •

edited by TkDodo

vercel bot commented Nov 1, 2021 •

edited

codesandbox-ci bot commented Nov 1, 2021 •

edited

TkDodo left a comment

TkDodo commented Nov 6, 2021

jvuoti commented Nov 7, 2021

codecov bot commented Nov 7, 2021 •

edited

TkDodo commented Nov 12, 2021

TkDodo left a comment

jvuoti commented Nov 17, 2021

TkDodo commented Nov 17, 2021

jvuoti commented Nov 21, 2021

TkDodo left a comment

tannerlinsley commented Nov 26, 2021

TkDodo Dec 4, 2021

jvuoti Dec 4, 2021

TkDodo Dec 4, 2021

fix(useQueries): search for unused observers if keepPreviousData (#2680) #2866

fix(useQueries): search for unused observers if keepPreviousData (#2680) #2866

Conversation

jvuoti commented Nov 1, 2021 • edited by TkDodo

vercel bot commented Nov 1, 2021 • edited

codesandbox-ci bot commented Nov 1, 2021 • edited

TkDodo left a comment

Choose a reason for hiding this comment

TkDodo commented Nov 6, 2021

jvuoti commented Nov 7, 2021

codecov bot commented Nov 7, 2021 • edited

Codecov Report

TkDodo commented Nov 12, 2021

TkDodo left a comment

Choose a reason for hiding this comment

jvuoti commented Nov 17, 2021

TkDodo commented Nov 17, 2021

jvuoti commented Nov 21, 2021

TkDodo left a comment

Choose a reason for hiding this comment

tannerlinsley commented Nov 26, 2021

TkDodo Dec 4, 2021

Choose a reason for hiding this comment

jvuoti Dec 4, 2021

Choose a reason for hiding this comment

TkDodo Dec 4, 2021

Choose a reason for hiding this comment

jvuoti commented Nov 1, 2021 •

edited by TkDodo

vercel bot commented Nov 1, 2021 •

edited

codesandbox-ci bot commented Nov 1, 2021 •

edited

codecov bot commented Nov 7, 2021 •

edited