T
TanStack•6mo ago
firm-tan

isSuccess signal is not triggering on infiniteQuery

    effect ( () => {

      console.log( this.query.isSuccess() );

      if ( this.needsFetching() && this.query.isSuccess() ) {

        this.needsFetching.set( false );

        this.query.fetchNextPage().then( console.log );

      } else if ( this.query.isSuccess() && this.isFirstLoad() ) {

        if ( ( window.innerHeight + window.scrollY) >= document.body.offsetHeight ) {

          this.query.fetchNextPage()

          //the isSuccess() signal should trigger back the effect after the request but doesn't

        } else {

          this.isFirstLoad.set( false );

        }

      }

    }, { allowSignalWrites:true })
    effect ( () => {

      console.log( this.query.isSuccess() );

      if ( this.needsFetching() && this.query.isSuccess() ) {

        this.needsFetching.set( false );

        this.query.fetchNextPage().then( console.log );

      } else if ( this.query.isSuccess() && this.isFirstLoad() ) {

        if ( ( window.innerHeight + window.scrollY) >= document.body.offsetHeight ) {

          this.query.fetchNextPage()

          //the isSuccess() signal should trigger back the effect after the request but doesn't

        } else {

          this.isFirstLoad.set( false );

        }

      }

    }, { allowSignalWrites:true })
this.isFirstLoad.set(false) is never triggered. I've tried changing the position of isSuccess() in the conditions but first part of the effect is getting triggered after scroll event but the second part is triggered after the default fetch.It is supposed to fetch enough requests to fill the window's height.Thank for your time and consideration. as simple example would be to do something like this 
effect( () => {
  query.isSuccess()
  query.fetchNextPage()
} )
effect( () => {
  query.isSuccess()
  query.fetchNextPage()
} )
here I would expect the effect to trigger infinitely but it doesn't
4 Replies
foreign-sapphire
foreign-sapphire•6mo ago
I'm not 100% sure, but the isSuccess() property stays true because you have available data in the query after the 1st fetch, thus there is nothing to trigger the effect. The property you are probably looking for is isFetching(). Query has two properties status and substatus The first one more or less represents the state of the data. The second is the state of the fetching process. The earlier mentioned properties are basically shortcuts for the statuses
firm-tan
firm-tanOP•6mo ago
@SergeyFilenko thank you for your answer I've also tried isFetched() without a chance but do you have any idea which signal to use after each fetch in order to trigger effect?
foreign-sapphire
foreign-sapphire•6mo ago
try isFetching() not isFetched(). IsFetching() jumps from true to false every time the query finishes fetching, so that will trigger your effect. Frankly speaking, you could just calculate/eyeball how many items you need to fill the screen for the first fetch and avoid shenanigans with fetching additional items until you fill the screen. That would also avoid sort of a waterfall problem. For example if you need 9 items to fill the page and you fetch 3 items at a time, user have to sit through 3 sequential requests
firm-tan
firm-tanOP•6mo ago
@SergeyFilenko thanks for your reply.That could be way of doing so

Did you find this page helpful?