title: Mongoose (MERN) URL Query Params With Pagination
body: <p>I am trying to add URL search/filter params (to search for '?bodyType=Saloon' which is a field in the model schema) to a mongoose query (on MERN stack) which has pagination working already. I haven't been able to get pagination and params filtering/searching working yet, but here are the different codes/functions I've been using.</p>
  <p>if anyone thinks they could help, that would be great please.
  Thank you!</p>
  <p>These are the three pieces of code which work together to fetch all vehicles, and show them with pagination on the 'search' page on the ReactJS web app.</p>
  <hr />
  <h2>Query:</h2>
  <pre><code>router.get('/', async (req, res) =&gt; {
    try {
      const pageSize = 9;
      const page = Number(req.query.page) || 1;
      const count = await Vehicle.countDocuments();
      const vehicles = await Vehicle.find({})
        .limit(pageSize)
        .skip(pageSize * (page - 1));
  
      if (!vehicles) {
        return res.status(200).json({ success: true, data: [] });
      }
      res
        .status(200)
        .json({ vehicles, page, totalPages: Math.ceil(count / pageSize) });
    } catch (error) {
      console.error(error.message);
      res.status(500).send('Server Error');
    }
  });
  </code></pre>
  <hr />
  <h2>Vehicle Service:</h2>
  <pre><code>// get all vehicles
  export const fetchAllVehicles = async (pageNumber) =&gt; {
    try {
      const response = await apiClient.get(`/api/v1/vehicles?page=${pageNumber}`);
      return response.data;
    } catch (error) {
      console.log(error);
      return {
        success: false,
        data: [],
      };
    }
  };
  </code></pre>
  <hr />
  <h2>Search page on frontend:</h2>
  <pre><code>  const [vehicles, setVehicles] = useState([]);
    const [pageNumber, setPageNumber] = useState(1);
    const [numberOfPages, setNumberOfPages] = useState(1);
  
    const pages = new Array(numberOfPages).fill().map((v, i) =&gt; (
      &lt;Pagination.Item
        key={i + 1}
        active={i + 1 === pageNumber}
        onClick={() =&gt; setPageNumber(i + 1)}
      &gt;
        {i + 1}
      &lt;/Pagination.Item&gt;
    ));
    const getVehicles = async () =&gt; {
      const { vehicles, page, totalPages } = await fetchAllVehicles(pageNumber);
      setVehicles(vehicles);
      setNumberOfPages(totalPages);
      window.scrollTo(0, 0);
    };
  
    useEffect(() =&gt; {
      getVehicles();
    }, [pageNumber]);
  
    return (
      &lt;div className='main-search-container'&gt;
        &lt;div className='sidebar-search-page'&gt;
          &lt;SideFilterNew /&gt;
        &lt;/div&gt;
        &lt;div className='card-search-container'&gt;
          &lt;div className='container-search-page'&gt;
            {vehicles &amp;&amp;
              vehicles.map((vehicle, i) =&gt; {
                return &lt;CarCard key={i} vehicle={vehicle} /&gt;;
              })}
          &lt;/div&gt;
          &lt;Pagination
            className='pagination-row'
            style={{ display: 'flex', justifyContent: 'center' }}
          &gt;
            {pages}
          &lt;/Pagination&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Search;
  </code></pre>