TanstackQuery - useQuery inside a MutationFn

[enszrlu]

I am trying to learn Tanstack Query aka React Query. Standalone queries and mutations are working as a charm, but I am bit confused what to do when I need to fetch data inside my mutationFn.

In my example, before creating a new item in the DB, I want to fetch data from external API. I can call the useQuery before calling the mutate function inside my react component but I want to understand if I can do it directly in mutationFn.

Basically what I try to do is as below, but of course eslint and React complains that I am using a hook outside React function component or a custom React Hook function.

What is the best way to handle this? If I use the query in ReactComponent and then pass the result to mutation function, it is bit weird as well because useQuery does not return a promise so how can I chain them?

  const mutationFn = async (key) => {
    const { data, error } = useCostomQuery(key);
    
    if (error) throw error;
    const mappedData = mapExternalDataToData(data);

    return await createDataInDB(mappedData);
 const useCostomMutation = useMutation({
    mutationFn: (key) => mutationFn(key),
    onMutate,
    onError,
    onSettled,
  });