/fsd-react-query-example

Primary LanguageTypeScript

Пример использования react-query в FSD (сделан совместно с авторами FSD)

Посмотреть на CodeSandbox

Описание

Проект является официальным учебным примером для демонстрации совместного использования технологии react-query и архитектурной методологии FSD

Используемые технологии:

  1. TypeScript: Язык программирования, расширяющий возможности JavaScript с помощью статической типизации.
  2. React - библиотека для создания пользовательских интерфейсов
  3. Material UI - библиотека UI-компонентов
  4. React Router - для управления маршрутизацией приложения
  5. React Query - библиотека управления состоянием запросов к серверу

Структура проекта

По архитектуре FSD

Структура проекта выглядит следующим образом:

|                               #
└── src/                        #
    ├── app/                    # Инициализирующая логика приложения                #
    |                           #
    ├── pages/                  # Слой: Страницы приложения
    |   ├── home/               #     Слайс: Главная страница постов с пагинацей
    |   |   ├── lib/            #         Сегмент: Логика хранения текущей страницы в query params
    |   |   |                   #       
    |   |   └── ui/             #         Сегмент: Логика UI отображения
    |   |                       # 
    |   └── post/               #     Слайс: Детальное отображение поста
    |       |                   #       
    |       └── ui/             #         Сегмент: Логика UI
    |                           #
    |                           #
    ├── entities/               # Слой: Бизнес-сущности
    |   └── post/               #     Слайс: сущность Поста
    |       ├── model/          # 
    |       ├── api/            #         Сегмент: Здесь пример с react-query
    |       └── ui/             # 
    |                           #
    |                           #
    └── shared/                 # Слой: Переиспользуемые модули, без привязки к бизнес-логике
        ├── api/                #         Сегмент: Api клиент
        ├── config/             #         Сегмент: Конфигурация приложения (API_URL, env_vars, ...)
        └── lib/                #         Сегмент: Инфраструктурная логика приложения (utils/helpers)

1.1 Когда ключи в слое entities

└── src/                   
    ├── entities/               
    |   ├── {entity}/          
    |   ...    └── api/            
    |               ├── `{entity}.query`     # query-factory (см. раздел с query-factory)
    |               ├── `get-{entity}`       # функции работы с сущностью
    |               ├── `create-{entity}`    
    |               ├── `delete-{entity}`    
    |               ├── `update-{entity}`    
    |               ...                      
    └── shared/                  
        ...

1.1 Когда ключи в shared слое

└── src/
   ...   
    |   
    └── shared/                  
         ├── api/      
        ...   ├── queries/                   # query-factories (см. раздел с query-factory)
              |      ├── document.ts          
              |      ├── background-job.ts  
              |     ...
             ...                             # организация запросов по усмотрению