How can I load dependent requests data?

[buglessir]

I've to use 3 API's data to submit a form. I should fill 3 drop-downs by fetching these APIs
I was thinking to implement something like this:

const one = useQuery('key1' , ( ) => fetcher(productId) , { enabled: false });
const two = useQuery('key2' , ( ) => fetcher(productId) , { enabled: false });
const three = useQuery('key3' , ( ) => fetcher(productId) , { enabled: false });

const submit = async (id) => {
  setProductId(id);
  let dataOne = await one.refetch();
  let dataTwo = await two.refetch();
  let dataThree = await three.refetch();
  Promise.all([dataOne, dataTwo, dataThree]).then(values => {
      /* submit form here  */
  });
}

But I've doubt on this scenario which is best practice or not? Is there any way to write this code simpler and clean?
Actually, I couldn't use https://react-query.tanstack.com/guides/dependent-queries because these queries work separately and aren't in a nested list of API calls.

[TkDodo]

productId should go to the query key, and you can disable your query for as long as you have no productId:

const one = useQuery(['key1', productId] , ( ) => fetcher(productId) , { enabled: !!productId });
const two = useQuery(['key2', productId] , ( ) => fetcher(productId) , { enabled: !!productId });
const three = useQuery(['key3, productId] , ( ) => fetcher(productId) , { enabled: !!productId });

const submit = (id) => {
  setProductId(id);
}

doing a form submit after you've fetched these would then likely need to be done in an effect:

useEffect(() => {
  if (one.data && two.data && three.data) {
    // submit form
  }
}, [one.data, two.data, three.data])

not really sure if that is better. the advantage would be that you get caching, which you don't really get with the refetch method, because it would just refetch every time you click submit, even if you have fresh data in the cache. At that point, your version is not really different than calling axios.get directly in submit.