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

[TkDodo]

what's the concrete use-case of fetching something when / before a mutation is done?

[enszrlu]

When mutation is dependent on additional data.

Let's thing this example

• User adds a new stock to his wallet
• Frontend calls mutation to add this to supabase
• Mutation Function fetches (query) data from external api to fill the blanks for supabase. For example, current price, company name, exchange etc.

I can also first fetch the data and provide entire data to mutation function but I am trying to understand if this is possible on mutation. I already found a solution to this, using fetchQuery

  const mutationFn = async (symbol: string) => {
    const stock: Stock = await queryClient.fetchQuery({
      queryKey: stockQueryKey(symbol),
      queryFn: () => getStockClient(symbol),
    });

    if (!stock) {
      throw new Error('Stock not found');
    }

    const asset = mapStockToAsset(stock);

    const response = await mutateAsset(asset);

    if (!response) {
      throw new Error('Failed to create asset');
    }

    return response;
  };

[TkDodo]

fetchQuery is a good solution 👍