title: How to handle multiple queries with React-Query
body: <p>I've started playing with React-Query and it works great if I only need to fetch data from a single collection in my database. However, I'm struggling to find a good way to query multiple collections for use in a single component.</p>
  <p>One Query (no problem):</p>
  <pre class="lang-js prettyprint-override"><code>const { isLoading, isError, data, error } = useQuery('stuff', fetchStuff)
  
  if (isLoading) {
       return &lt;span&gt;Loading...&lt;/span&gt;
     }
   
     if (isError) {
       return &lt;span&gt;Error: {error.message}&lt;/span&gt;
     }
   
     return (
       &lt;ul&gt;
         {data.map(stuff =&gt; (
           &lt;li key={stuff.id}&gt;{stuff.title}&lt;/li&gt;
         ))}
       &lt;/ul&gt;
     )
   }
  </code></pre>
  <p>Multiple Queries to Different Collections ():</p>
  <pre class="lang-js prettyprint-override"><code>const { isLoading: isLoadingStuff, isError: isErrorStuff, data: stuff, error: errorStuff } = useQuery('stuff', fetchStuff);
  const { isLoading: isLoadingThings, isError: isErrorThings, data: Things, error: errorThings } = useQuery('things', fetchThings);
  const { isLoading: isLoadingDifferentStuff, isError: isErrorDifferentStuff, data: DifferentStuff, error: errorDifferentStuff } = useQuery('DifferentStuff', fetchDifferentStuff);
  
  const isLoading = isLoadingStuff || isLoadingThings || isLoadingDifferentStuff
  const isError = isErrorStuff || isErrorThings || isErrorDifferentStuff
  const error = [errorStuff, errorThings, errorDifferentStuff]
  
  if (isLoading) {
       return &lt;span&gt;Loading...&lt;/span&gt;
     }
   
  if (isError) {
      return (
        &lt;span&gt;
          {error.forEach((e) =&gt; (e ? console.log(e) : null))}
          Error: see console!
        &lt;/span&gt;
      );
    }
   
     return (
    &lt;&gt;
      &lt;ul&gt;
        {stuff.map((el) =&gt; (
          &lt;li key={el.id}&gt;{el.title}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
      &lt;ul&gt;
        {things.map((el) =&gt; (
          &lt;li key={el.id}&gt;{el.title}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
      &lt;ul&gt;
        {differentStuff.map((el) =&gt; (
          &lt;li key={el.id}&gt;{el.title}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/&gt;
  );
   }
  </code></pre>
  <p>I'm sure there must be a better way to do this. I'm very interested in React-Query for multiple reasons but one nice benefit is to reduce boilerplate. However, this approach doesn't seem much better than using useEffect and useState to manage my api calls. I did find the useQueries hook but it didn't make this any cleaner really.</p>
  <p>Does anyone know if there is a way in React-Query to make multiple queries and only get back one isLoading, isError, and error(array?) response? Or just a better way to handle multiple queries that I'm missing?</p>