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
});
};
You can keep the second query from firing using a property called enabled as:
const { data: resourceId } = useGetResourceId();
const { data, isLoading, error } = useGetResourceData(resourceId, {
enabled: !!resourceId // Query won't run until resourceId is truthy
});
