react query: asynchronous state management lib.

We have seen React Query as a data fetching library, but React Query is beyond a data fetching library.

data fetching, caching, deduping, stale data, data update, performance optimisation, managing memory, memorising queries, less code and very less bugs.

deduping: Prevent unnecessary API calls when you make multiple duplicate API calls.

caching, background re-fetching, and invalidating the cache.

Let's say that you do have the data in the cache, and you're showing that to the user ideally, what you will want to do, at the same time, is trigger a request in the background if the user doesn't see that. to just refresh the data, in case there's new data to be found.

Don't write the code that's already written, use something that's tested and that works and that does the work for you.

https://faun.pub/from-setup-to-execution-the-most-accurate-tanstack-query-and-next-js-14-integration-guide-8e5aff6ee8ba

https://www.robinwieruch.de/next-server-actions-fetch-data/

stealTime

gcTime: garbage collection

example:

let data= useQuery({
	queryKey:["products"],
	queryFn:yourDataFetchingFunction
})

You get the data, loading state, and error state:

const {data, loading,error }=data;

Mutation: