title: Filtering a fetched list from an API using React Query
body: <p>I am using React Query (for the first time) to manage calls to an API. I am fetching a list of invoices, which I've done successfully so far in the code below. I now want to filter this list based on a status property that each invoice object has - it is either 'paid', 'pending' or 'draft - using a series of checkboxes.</p>
  <p>How would I go about this? Could the filtering be somehow integrated into the initial call to the API so I am always receiving one set of data, or would I have to make multiple calls and render the data accordingly below?</p>
  <pre><code>import React from 'react'
  import {useQuery} from 'react-query'
  import InvoiceLink from './InvoiceLink'
  
  const fetchData = async () =&gt; {
      const res = await fetch('http://localhost:3004/invoices');
      return res.json();
  };
  
  
  export default function InvoiceList() {
      const {data, isLoading, isError} = useQuery('invoices', fetchData);
      return (
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;paid&quot;&gt;&lt;/input&gt;&lt;label htmlFor=&quot;paid&quot;&gt;Paid&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;pending&quot;&gt;&lt;/input&gt;&lt;label htmlFor=&quot;pending&quot;&gt;Pending&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;draft&quot;&gt;&lt;/input&gt;&lt;label htmlFor=&quot;draft&quot;&gt;Draft&lt;/label&gt;&lt;/li&gt;
              &lt;/ul&gt; 
              {isError &amp;&amp; (
                  &lt;p&gt;Error&lt;/p&gt;
              )}
              {isLoading &amp;&amp; (
                  &lt;p&gt;Loading&lt;/p&gt;
              )}
              &lt;ul&gt;
              {data &amp;&amp; data.map(item =&gt; 
                  &lt;InvoiceLink key={item.id} invoice={item} /&gt;
              )}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>