getProduct(id), you can call this way when you function needs arguments(data). select:(data)=> data || [] //you can transform your data before using it. })"> getProduct(id), you can call this way when you function needs arguments(data). select:(data)=> data || [] //you can transform your data before using it. })"> getProduct(id), you can call this way when you function needs arguments(data). select:(data)=> data || [] //you can transform your data before using it. })"> 
const {data, isPending, refetch}= useQuery<Post[]>({
	queryKey:["products"],
	queryFn:getProducts,
	queryFn: ()=> getProduct(id), you can call this way when you function needs arguments(data).
	select:(data)=> data || [] //you can transform your data before using it.
})

queryKey: the query key is used for caching and refetching the data. Key can be anything, but the key must be unique so that we know which query we are referencing. If it is not unique, let's say another query shares the exact same key, the query client is not going to be able to distinguish between the two of them.

queryFn: This is the function that will run whenever we run the query with this key. This is the function where you would put your data fetching logic(api call). This function must return a promise.

idPending: it gives true if there is no cache data(very first time).

isFetching: it gives true whenever the query function is running at all.

status === "pending" means there is no data in the cache.

fetchStatus === "fetching" means the queryFn is being executed.

isLoading means that the status is pending, and the fetchStatus is fetching.

if(isLoading){
	return <div>...</div>
}
if(status==="error"){
	return <div> there was an error</div>
}
if(status==="scuccess"){
	return <div> data ...</div>
}
return  <div> please enter a valid data..</div>