Obtuve este código para obtener el límite de página y productos en el backend:

 getProductsPagination: async (_, { page }) => { const skip = (page - 1) * 12; const limit = 12; const total = await Product.countDocuments(); let query = Product.find({}); query = query.skip(skip).limit(limit); const pages = Math.ceil(total / limit); const result = await query; return { products: result, numOfPages: pages }; },

Estoy filtrando productos desde la interfaz y todo funciona muy bien, pero solo en la página 3 tengo productos con el color rosa, así que si estoy en la página 1 e intento filtrar el color rosa, no mostrará estos productos. Tendré que saltar a la página 3 para eso. ¿Es posible hacer que esto funcione solo en la interfaz?

código frontal:

 const { data, loading, error } = useQuery(GET_PRODUCTS_PAGINATION, { variables: { page }, }); const products = data?.getProductsPagination?.products; const numOfPages = data?.getProductsPagination?.numOfPages; useEffect(() => { setFilteredProducts(products); const applySort = (filteredList) => { return sort.length <= 0 ? filteredList : sort.includes('price-highest') ? filteredList?.slice().sort((a, b) => b.price - a.price) : sort.includes('top-rated') ? filteredList?.slice().sort((a, b) => b.rates - a.rates) : filteredList?.slice().sort((a, b) => a.price - b.price); }; const sizePredicate = (product) => { return size.length === 0 || product.size.includes(Number(...size)); }; const brandPredicate = (product) => { return brand.length === 0 || product.brand.includes(...brand); }; const pricePredicate = (product) => { return ( price.length === 0 || (product.price > price[0][0] && product.price < price[0][1]) ); }; const colorPredicate = (product) => { return color.length === 0 || product.color.includes(...color); }; setFilteredProducts((filteredList) => applySort( filteredList ?.filter(sizePredicate) ?.filter(brandPredicate) ?.filter(pricePredicate) ?.filter(colorPredicate) ) ); }, [products, sort, price, brand, size, test, color, page]);