automatic-azure

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

conscious-sapphire•16mo ago

yes

automatic-azureOP•16mo 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)
      };

conscious-sapphire•16mo ago

order in results is guaranteed to be the same as input order

automatic-azureOP•16mo ago

So using index like this is good to go?

conscious-sapphire•16mo ago

Yeah, or destruct

automatic-azureOP•16mo ago

How would i deatruct it in this case?

conscious-sapphire•16mo ago

Destruct the array that comes into combine

automatic-azureOP•16mo 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
      };
    }

Gaming

Programming

How to use useQueries

Did you find this page helpful?