For useQueries, what's the best way to get notified ONCE when all the queries have succeeded?

[blomm]

I currently use onSettled to update state (runsData), and when runsData is updated I check if the queryCache has all the data I'd expect when all 3 queries have run.

I'm sure there must be an easier way to check when all the queries have finished, and then do something with the results.

const [runsData, setRunsData] = useState<any[]>([]);

const runQueries = useQueries(
    tables.map((table: string) => {
      return {
        queryKey: [
          "runs",
          {
            table
          },
        ],
        queryFn: fetchRunsForTable,
        onSettled: (data?: any, error?: any) => {
          setRunsData((rd) => {
            return [...rd, [data]];
          });
        },
      };
    })
  );

useEffect(() => {
    let [runsA, runsB, runsC] = getRunResultsFromCache();

    if (runQueries.every((rq) => rq.isSuccess) && runsA && runsB && runsC) {
        .... all the queries have executed successfully, and expected data exists in cache
    }
  }, [runsData.length]);

const getRunResultsFromCache = (): any[][] => {
  const runsA = queryClient.getQueryData([
      "runs",
      {
        table: "tableA",
        
      },
    ]) as any[];
  const runsB = queryClient.getQueryData([
      "runs",
      {
        table: "tableB",
        
      },
    ]) as any[];
  const runsC = queryClient.getQueryData([
      "runs",
      {
        table: "tableC",
        
      },
    ]) as any[];
  
  return [runsA, runsB, runsC]
}

[TkDodo]

I think there must be something more simple. Do you really need to get the data from the cache? I would consider it done if all the queries are in success state, so something like:

const runQueries = useQueries(
    tables.map((table: string) => {
      return {
        queryKey: [
          "runs",
          {
            table
          },
        ],
        queryFn: fetchRunsForTable,
      };
    })
  );

const allFinished = runQueries.every(query => query.isSuccess)


useEffect(() => {
    if (allFinished) {
        // all the queries have executed successfully
    }
}, [allFinished])

problem is, you can't really depend on the data in your effect, because it would likely be a new array in every render, thus executing the effect every time. You could work around this with a ref, or with reading from he queryClient with getQueryData once allFinished is true. https://github.com/kentcdodds/use-deep-compare-effect might also work here

[blomm]

Thanks @TkDodo , that's the exact problem I was having, the useEffect being called unnecessarily every render.
I'll have a look at this deep compare useEffect