Comments (12)
I'm not sure what you mean, so PR is welcome.
from query.
Hi, thanks for your response.
Basically, I am seeing multiple canceled network requests in the network tab of chrome when using a query in multiple places at the same time. (see stackblitz).
I am not 100% sure what the expected behavior should be. But I think it shouldn't happen that there are multiple concurrent network requests for a single query.
I am willing to create to try to fix this, but I prefer to both agree first that this is in fact a bug.
from query.
Multiple queries with the same key should produce one request.
from query.
The queries in my example have the same key, but produce multiple requests,
So I guess seeing multiple canceled network requests is an error.
But perhaps thee is something wrong with my example code.
from query.
Can you reproduce on stackblitz, please?
from query.
Ah I mixed up code sandbox and stackblitz.
I have reproduced on stackblitz (https://stackblitz.com/~/github.com/roel-de-jong-iqvia/request_deduplication)
The canceled network requests appear the second time you press the "invalidate" button.
from query.
it doesn't load
from query.
Works in my browser.
Press the "invalidate query" button.
Second time you press the button there are multiple canceled requests
(Perhaps it wasn't working at first because it requires changes to be pushed to the github repository)
from query.
Seems like the issue is in take(1).
this.characters$ = this.event.pipe(
switchMap(() => this.queryService.character$("joehoe"))
);
This works
from query.
btw why do you use take 1?
from query.
Indeed, I also noticed this:
When I continuously observe the query, only a single network request is fired.
btw why do you use take 1?
In the minimal reproduction I posted it admittedly does not make a lot of sense.
However, in our project we are migrating from Akita stores to Tanstack Query.
In response to an Akita store change, I need to calculate / derive some state from the Tanstack query data,
Originally, the code which performed the calculation was synchronous. However, fetching of query data is of course by nature asynchronous. To mimic the synchronous nature of the original code, I opted to take only the first emitted value.
I can remove the take 1
and workaround it, but it seems to me having promise-like behavior (where we are only interested in a single value emitted by the query) should work in the sense that no duplicate requests are made.
Without having studied the library code I suspect some query context is lost when all query observers unsubscribe?
from query.
If you only need to get the data once you can use ensureQueryData or getQueryData.
https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientgetquerydata
https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientensurequerydata
from query.
Related Issues (20)
- Cannot find module '@tanstack/query-core/build/legacy/queryClient-b7fce2ff' HOT 2
- Export MutationResult and CreateMutationOptions
- createSuccessObserverResult should also take a generic error HOT 3
- Add refetch to intersectResults HOT 6
- mutate function should subscribe to mutationObserver HOT 1
- Automatically unsubscribe query observable HOT 1
- multiple fired network HOT 2
- onSuccess is never triggered when passed as option to mutate HOT 3
- Should ngneat/query Cache Pages Instead of Fetching on Each Pagination Click?
- support: angular v18 HOT 5
- bug: `throwOnError` does not work HOT 6
- ApplicationRef.isStable() is not emitting? HOT 6
- Detecting empty data in Angular/RxJS infinite scroll: Best approach? HOT 4
- Make it reactive (or is it already?) HOT 3
- Error: NG0203 at assertInInjectionContext HOT 2
- queryResultSignal() can only be used within an injection context? HOT 2
- How Can I Execute Logic When Query Data is Retrieved from Cache Using `@ngneat/query`? HOT 1
- Current version of `@tanstack/query-devtools` not optimized for air-gapped usage or with a strict CSP
- Feature Request: Enhance `injectQuery` to Accept an Options Object HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from query.