@garpix/fetcher NPM

Как использовать Fetcher

Импортируем

import { Fetcher } from '@garpix/fetcher';

В компонент который является странице необходимо добавить Fetcher и прокинуть все props из react-router-dom.

paramsKey отвечает за ключ в объекте match.params на который будет происходить обновление.

<Fetcher {...props} paramsKey={'0'}>
  {(data, error) => {
    if(data === null && error !== null) return <ErrorPage error={error} />
    if(!data) return null;
    const { pageType, page } = data;
    const Page = PAGE_TYPES[pageType];
    return <Page {...page} />
  }}
</Fetcher>

Следуя документации настраиваем https://github.com/storeon/storeon

И добавляем

import { page } from '@garpix/fetcher';
const storeonParams = [
    ...
    page,
]

FetcherList

Параметры компонента

api: эндпоинт куда фечер будет бегать за данными

пример эндпоинта

import BaseApi from '@garpix/base-api';

export default class ContentApi extends BaseApi {
  getCatalogData = async (params = {}) => {
    const res = await this.get('/catalog/product/', params);
    return res.data;
  };
}

Пример использования

<FetcherList api={contentApi.getCatalogData}>
  {(data) => {
    const {
      count,
      results = [],
      activePage,
      loadData,
      showMore,
      status,
      filterParams,
      deleteElement,
      updateElement,
      deleteElementByKey,
      updateElementByKey,
      isNext,
      isPrev,
    } = data;
    return (
      <>
        <AppliedFilters />
        <FiltersCatalog
          categories={categories}
          brands={brands}
          multy_choise_filters={multy_choise_filters}
        />
        <ProductGrid results={results} />
      </>
    );
  }}
</FetcherList>

Параметры функции рендера

count: общее колличество элементов

results: множество данных описывающих основные сущности

activePage: текущяя активная страница пагинации

loadData: функция принимающяя (page, filterParams, isConcat) Название параметра | Параметры ----------------|---------------------- page | обязательный параметр filterParams | {} isConcat | false