title: How to perform action after all parallel queries are successful in "React-Query"
body: <p>In React-Query we can use the useQueries hook to perform parallel queries (mostly like using Promise.all): <a href="https://react-query.tanstack.com/guides/parallel-queries" rel="nofollow noreferrer">https://react-query.tanstack.com/guides/parallel-queries</a></p>
  <p>Every Query has a set of options that we can use, on of them is the <code>onSuccess</code> and can be used as below:</p>
  <pre><code>const data = useQueries([{
      queryKey: 1,
      queryFn: () =&gt; axios.get(...),
      onSuccess: data =&gt; ... do something,
    },
    {
      queryKey: 2,
      queryFn: () =&gt; axios.get(...),
      onSuccess: data =&gt; ... do something,
    },
  ])
  </code></pre>
  <p>But what I really need is to be able to perform an action only when all the queries all successful. Mostly like:</p>
  <pre><code>Promise.all(fn).then(...)
  </code></pre>
  <p>and use that data to run a function afterwards.</p>
  <p>I came up with a few things like</p>
  <p><strong>1</strong> - pushing all the successful queries to a <code>useState()</code></p>
  <pre><code>onSuccess: (data) =&gt; setData((prevData) =&gt; [...prevData, data])
  </code></pre>
  <p>and setup a useEffect:</p>
  <pre><code>useEffect(() =&gt; {
  // run function
  }, [data])
  </code></pre>
  <p>But this won't work because it will fire every time one of the queries is successful. Probably will break due to an infinite loop.</p>
  <p><strong>2</strong> - Making a condition for when all are successful:</p>
  <pre><code> if (data.every(num =&gt; num.isSuccess === true)) {
      // do something
    }
  </code></pre>
  <p>This might work but it looks clumsy to me. Wondering if theres a better and more performant method out there.</p>