Would you consider adding 'onStart' method to the config?

[gregg-cbs]

Would you consider adding something like 'onStart' to the config so I an hook into all 3 events:

 api.cart.get.useQuery(null, {
    onStart: (cartr)=> {
      // set stores loading state: true
     // does some stuff
    },
    onSuccess: (cartr)=> {
      // set stores data
    },
    onSettled(){
      // set stores loading state: false
    }
  })

Seems like a missing piece to the puzzle.

[TkDodo]

what would be a practical use-case for it?

[TkDodo]

abstracting useQuery into custom hooks is the recommended way so that you can use them wherever you need to in your application, but this doesn't mean you have to duplicate loading / error states anywhere.

If i used the above query in many different components, how would I get them to show one generic loader in the app without repeating the code?

I don't know how you are doing that with cart.set({is_loading: true}), but instead, wherever you check for this is_loading flag, you could also just call const { isLoading } = useUser() and then display the loading spinner based on the flag returned from useQuery.

You can do the same for error handling, though my recommendation is to leverage error boundaries.

If I used the above query and I wanted some placeholder data until the query was ready, in multiple places, how would I do that?

with the placeholderData option.

[gregg-cbs]

Okay great. Yesterday I removed the store from my app and i now use query as my state manager too:

export function useUserQuery() {
  return api.user.get.useQuery(undefined, {
    refetchOnWindowFocus: false,
    cacheTime: Infinity,
    queryKey: ["user.get", undefined],
    initialData: {
      addresses: [],
      bank_cards: []
    }
  });
}

export function useUserMutation() {
  const utils = api.useContext()

  return api.user.update.useMutation({
    onSuccess() {
      utils.user.invalidate()
      utilAudioSuccess()
    },
    onError: utilAudioError
  })
}

export default function SomePage(props) {
  const $user = useUserQuery()
}

I am guessing if I want a global loader to trigger when any of my queries are loading I have to do something like this in my _app.tsx, which seems like a lot of overhead?

  const $user = useUserQuery()
  const $cart = useCartQuery()
  const $checkout = useCheckoutQuery()
  const $checkoutDeliveryMutation = useCheckoutDeliveryMutation()
  const $payment = usePaymentQuery()
  // ... and 10 others

  const loading = $user.isLoading || $cart.isLoading || $checkout.isLoading || $checkoutDeliveryMutation.isLoading || $payment.isLoading || "10 other checks"

  return (
    <>
      <Loader show={loading}>Loading...</Loader> 
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )

[TkDodo]

useIsFetching() is a good hook that can do this for you. Note that it will return the number of currently fetching queries, and it can be filtered down to specific query keys or other filters if you want (see: https://tanstack.com/query/v4/docs/react/guides/filters).

Also note that fetching includes background refetches. If you only want it for hard loading states, you'd do:

useIsFetching({ predicate: query => query.state.status === 'loading' })

But at that point, I'd likely just use suspense :)

[gregg-cbs]

Thanks for your time on this!

Right so in my case it would be:

const isFetchingPosts = useIsFetching({ 
  queryKey: ['user', 'cart'], 
  predicate: query => query.state.status === 'loading'  
})

That solves my problems. I am yet to try it but will give it a go soon!

[gregg-cbs]

I really appreciate your feedback and guidance. Its tough when using a new stack: Prisma, Mongo, Nextjs, Query etc... there is so much to learn and figure out and so many obstacles and challenges that make it really tedious to build something sometimes. Its frustrating to say the least.

So thanks for your efforts and input, i know you must be busy and it isnt easy babying some of us but its also not easy being us having to scavenge the internet for answers all the time.