§Fuente de datos & middot; [ (https://www.npmjs.com/package/@gravity-ui/data-source) [ (https://github.com/gravity-ui/data-source/actions/workflows/ci.yml?query=branch:main)

Data Source es un sencillo envoltorio para la obtención de datos. Es una especie de «puerto» en una arquitectura limpia. Te permite crear envoltorios para cosas relacionadas con la obtención de datos según tus casos de uso. Data Source usa react-query de forma oculta.

§Instalación

npm install @gravity-ui/data-source @tanstack/react-query

@tanstack/react-query es una dependencia de los compañeros.

§Cómo empezar

En primer lugar, defina un tipo de error y cree sus constructores para las fuentes de datos y su error se base en los constructores predeterminados (MakePlainQueryDataSource /MakeInfiniteQueryDataSource). Por ejemplo:

import {makePlainQueryDataSource as makePlainQueryDataSourceBase} from '@gravity-ui/data-source';

export interface ApiError {
  title: string;
  code?: number;
  description?: string;
}

export const makePlainQueryDataSource = <TParams, TRequest, TResponse, TData, TError = ApiError>(
  config: Omit<PlainQueryDataSource<TParams, TRequest, TResponse, TData, TError>, 'type'>,
): PlainQueryDataSource<TParams, TRequest, TResponse, TData, TError> => {
  return makePlainQueryDataSourceBase(config);
};

Escriba un DataLoader componente según el valor predeterminado. Esto resulta práctico para definir la visualización del estado de carga y los errores. Por ejemplo:

import {
  DataLoader as DataLoaderBase,
  DataLoaderProps as DataLoaderPropsBase,
  ErrorViewProps,
} from '@gravity-ui/data-source';

export interface DataLoaderProps
  extends Omit<DataLoaderPropsBase<ApiError>, 'LoadingView' | 'ErrorView'> {
  LoadingView?: ComponentType;
  ErrorView?: ComponentType<ErrorViewProps<ApiError>>;
}

export const DataLoader: React.FC<DataLoaderProps> = ({
  LoadingView = YourLoader,
  ErrorView = YourError,
  ...restProps
}) => {
  return <DataLoaderBase LoadingView={LoadingView} ErrorView={ErrorView} {...restProps} />;
};

Defina su primera fuente de datos:

export const objectDataSource = makePlainQueryDataSource({
  // Keys have to be unique. Maybe you should create a helper for making names of data sources
  name: 'object',
  // skipContext is just a helper to skip 2 first parameters in the function (context and fetchContext)
  fetch: skipContext(objectFetch),
});

Utilízalo en la aplicación:

import {useQueryData} from '@gravity-ui/data-source';

export const SomeComponent: React.FC = () => {
  const {data, status, error, refetch} = useQueryData(objectDataSource, {objectId: 1});

  return (
    <DataLoader status={status} error={error} errorAction={refetch}>
      {data && <ObjectComponent object={data} />}
    </DataLoader>
  );
};