reactjsreact-querytanstackreact-query

How to make react-query wait till input data used in request is resolved with other API call?


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?


Solution

  • 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
        });
      };