T
TanStack•4w ago
criminal-purple

Curious behavior in zoneless application

I use tanstack query angular in my zoneless application and there is some strange behaviour when rendering the app on the server. It seems like the .data() signal of my query fires before the .isSuccess() does. This causes the returned state from the server to always have my loading placeholder. Something that has helped to fix this issue was to introduce a job, which completes as soon as the query is successful. 
constructor() {
    this.config.updateTitle('Events');
    const eventsLoaded = this.taskService.add();
    effect(() => {
      const successs = this.eventQuery.isSuccess();
      if (successs) {
        eventsLoaded();
      }
    });
  }
constructor() {
    this.config.updateTitle('Events');
    const eventsLoaded = this.taskService.add();
    effect(() => {
      const successs = this.eventQuery.isSuccess();
      if (successs) {
        eventsLoaded();
      }
    });
  }
This leads to reliably displayed events in the server response. I'm not entirely sure what is going on there but wanted to flag this as somewhat strange
4 Replies
conscious-sapphire
conscious-sapphire•4w ago
I don’t think you should trigger an event as a result of a query being loaded. IF you’d like to trigger an event it should probably be in whatever gets called from queryFn. What is the purpose of eventsLoaded()?
conscious-sapphire
conscious-sapphire•4w ago
Depending on what the purpose is isStable may be a good alternative. https://angular.dev/api/core/ApplicationRef#isstable-examples-and-caveats if you use HttpClient it will be stable when data is fetched
Angular
The web development framework for building modern apps.
criminal-purple
criminal-purpleOP•4w ago
The eventsLoaded is a PendingTask to make angular delay sending the SSR result. (https://angular.dev/guide/zoneless#pendingtasks-for-server-side-rendering-ssr) I am already using the httpClient in the app and the result of the query is also in the transferred cache. The application is stable and the query also loads the data. It just seems that the query result is not rendered. My guess would be that it is related to the template setup 
      } @else if (eventQuery.isSuccess()) {
        @for (day of eventQuery.data(); track day.day) {
      } @else if (eventQuery.isSuccess()) {
        @for (day of eventQuery.data(); track day.day) {
When I add effects for both, success and the data, it seems that the data gets provided first and then the success signal fires. My guess is that this order leads to the template not updating with the data before being sent? That is why I am deliberately delaying the SSR until the query was successful. I hope that makes more clear what I meant with the weird behaviour.
conscious-sapphire
conscious-sapphire•4w ago
I would expect HttpClient's usage of PendingTasks to make it redundant to call it in application code. I tested SSR and it did work for me and documented that advantage of HttpClient here: https://tanstack.com/query/latest/docs/framework/angular/angular-httpclient-and-other-data-fetching-clients#using-angulars-httpclient-for-data-fetching If it doesn't work like that, It's probably a bug in the Angular adapter for TanStack Query. Can you create a reproduction and an issue?
Angular HttpClient and other data fetching clients | TanStack Query...
Because TanStack Query's fetching mechanisms are agnostically built on Promises, you can use literally any asynchronous data fetching client, including the browser native fetch API, graphql-request, a...

Did you find this page helpful?