I am using tanstack-query
and have dependent queries to do:
const { resourceId } = useGetResourceId(); // resourceId: number | null
const { data, loading, error } = useGetResourceData(resourceId);
How can I tell useGetResourceData
hook to wait with API call to retrieve resource data, until I have valid resourceId
from hook above?
This is how to ensure resourceId is available and valid before useGetResourceData query is being called.
const useGetResourceData = (resourceId: number | null) => {
return useQuery({
queryKey: ['resource-data', resourceId], // Cache key scoped to the specific resource ID
queryFn: () => fetchResourceData(resourceId!), //fetchResourceData is the funtion containing the api call/method
enabled: !!resourceId, // Waits until resourceId is truthy
});
};