T
TanStack•2y ago
exotic-emerald

How to use useQueries

Is this the correct way to combine two get requests with useQueries? 
export const useDashboardData = (setupId, days) => {
  return useQueries({
    queries: [
      {
        queryKey: ["statsData", setupId],
        queryFn: (setupId) => fetchStatsData(setupId)
      },
      { queryKey: ["chartData", days], queryFn: (days) => fetchChartData(days) }
    ]
  });
};
export const useDashboardData = (setupId, days) => {
  return useQueries({
    queries: [
      {
        queryKey: ["statsData", setupId],
        queryFn: (setupId) => fetchStatsData(setupId)
      },
      { queryKey: ["chartData", days], queryFn: (days) => fetchChartData(days) }
    ]
  });
};
8 Replies
unwilling-turquoise
unwilling-turquoise•2y ago
yes
exotic-emerald
exotic-emeraldOP•2y ago
@TkDodo 🔮 This is my result, is it enough to use error instead of isError? Since if isError is true there will be an error object? And should i use isLoading instead of while isPending? Will the two request share the same isLoading? For example i just need one if(isLoading) return <LoadingSpinner/>? 
export const useDashboardData = (setupId, days) => {
  return useQueries({
    queries: [
      {
        queryKey: ["statsData", setupId],
        queryFn: () => fetchStatsData(setupId)
      },
      { queryKey: ["chartData", days], queryFn: () => fetchChartData(days) }
    ],
    combine: (results) => {
      return {
        data: results.map((result) => result.data),
        isLoading: results.some((result) => result.isLoading),
        error: results.some((result) => result.error)
      };
    }
  });
};
export const useDashboardData = (setupId, days) => {
  return useQueries({
    queries: [
      {
        queryKey: ["statsData", setupId],
        queryFn: () => fetchStatsData(setupId)
      },
      { queryKey: ["chartData", days], queryFn: () => fetchChartData(days) }
    ],
    combine: (results) => {
      return {
        data: results.map((result) => result.data),
        isLoading: results.some((result) => result.isLoading),
        error: results.some((result) => result.error)
      };
    }
  });
};
@TkDodo 🔮 i get the data like this 
  const { data, isLoading, error } = useDashboardData(setupId, 30);
  const { data, isLoading, error } = useDashboardData(setupId, 30);
But since it's contain the both data results how can i get the right one? If i use index i guess that will break if there sometimes will not return data from both requests? Is there maybe a way to find the data based on the queryKey, i don't think this is the best way? 
return {
        data: {
          statsData: results[0].data,
          chartData: results[1].data
        },
        isLoading: results.some((result) => result.isLoading),
        error: results.some((result) => result.error)
      };
return {
        data: {
          statsData: results[0].data,
          chartData: results[1].data
        },
        isLoading: results.some((result) => result.isLoading),
        error: results.some((result) => result.error)
      };
unwilling-turquoise
unwilling-turquoise•2y ago
order in results is guaranteed to be the same as input order
exotic-emerald
exotic-emeraldOP•2y ago
So using index like this is good to go?
unwilling-turquoise
unwilling-turquoise•2y ago
Yeah, or destruct
exotic-emerald
exotic-emeraldOP•2y ago
How would i deatruct it in this case?
unwilling-turquoise
unwilling-turquoise•2y ago
Destruct the array that comes into combine
exotic-emerald
exotic-emeraldOP•2y ago
Thank you for always giving help🙏🏻 This seems to work 
  combine: ([statsResult, chartResult]) => {
      return {
        data: {
          statsData: statsResult.data,
          chartData: chartResult.data
        },
        isLoading: [statsResult, chartResult].some(
          (result) => result.isLoading
        ),
        error: [statsResult, chartResult].find((result) => result.error)?.error
      };
    }
  combine: ([statsResult, chartResult]) => {
      return {
        data: {
          statsData: statsResult.data,
          chartData: chartResult.data
        },
        isLoading: [statsResult, chartResult].some(
          (result) => result.isLoading
        ),
        error: [statsResult, chartResult].find((result) => result.error)?.error
      };
    }

Did you find this page helpful?