stormy-gold

Multiple queries in v5 - smth like Promise.all([])

Hi guys, i have unfinished snippet of code here which obvs does not work:

import { ApiClient } from "@services/api/apiClient";
import { useQueries, useQuery } from "@tanstack/react-query";
import { queryKey } from "@utils/queryKeys";

const getStates = async () => {
    return await ApiClient("/states").getStates();
};

const getLanguages = async () => {
    return await ApiClient("/languages").getLanguages();
};

export const useStatesQuery = () => {
    return useQuery({
        queryKey: [queryKey.states],
        queryFn: getStates,
        staleTime: 2 * 60 * 1000,
    });
};

const fetchEmployeesFormData = async () => {
    const states = await ApiClient("/states").getStates();
    const languages = await ApiClient("/languages").getLanguages();

    return { ...states, ...languages };
};


export const useEmployeesData = () => {
    return useQueries({
    queries:     
    })
};

import { ApiClient } from "@services/api/apiClient";
import { useQueries, useQuery } from "@tanstack/react-query";
import { queryKey } from "@utils/queryKeys";

const getStates = async () => {
    return await ApiClient("/states").getStates();
};

const getLanguages = async () => {
    return await ApiClient("/languages").getLanguages();
};

export const useStatesQuery = () => {
    return useQuery({
        queryKey: [queryKey.states],
        queryFn: getStates,
        staleTime: 2 * 60 * 1000,
    });
};

const fetchEmployeesFormData = async () => {
    const states = await ApiClient("/states").getStates();
    const languages = await ApiClient("/languages").getLanguages();

    return { ...states, ...languages };
};


export const useEmployeesData = () => {
    return useQueries({
    queries:     
    })
};

What i need is to execute all queries in one go before i pass them as a prop. So i need some mechanism what is used in JS - Promise.all . How can i finish this:

 useEmployeesData

 useEmployeesData

4 Replies

xenial-black•13mo ago

If these are all truly connected, you could make the queryFn the place where promise.All() happens:

const employeeData = useQuery({
   queryKey = [queryKey.states, language.key, etc..],
   queryFn = fetchEmployeeData
})

const fetchEmployeeData = async () => {
   return Promise.all([
      getStates(),
      getLanguages(),
      fetchEmployeesFormData
])
}

const employeeData = useQuery({
   queryKey = [queryKey.states, language.key, etc..],
   queryFn = fetchEmployeeData
})

const fetchEmployeeData = async () => {
   return Promise.all([
      getStates(),
      getLanguages(),
      fetchEmployeesFormData
])
}

rival-black•13mo ago

doesnt useQueries accomplish this?

stormy-goldOP•12mo ago

Exectly... I mean the question is can I use and if yes how can i use

useQueries

useQueries

to avoid useing Promise.all to accomplish a similar effect

rival-black•12mo ago

The docs have some pretty great examples on how it works!

Gaming

Programming

Multiple queries in v5 - smth like Promise.all([])

Did you find this page helpful?