Евгений Паромов Как правильно интегрировать mobx и react-query

Подробное описание: Евгений Паромов Как правильно интегрировать mobx и react-query

Евгений Паромов Как правильно интегрировать mobx и react-query

В определённый момент react-query сменил своё направление и превратился в @tanstack/react-query. Это означает, что его основное ядро было выделено в отдельный пакет @tanstack/query-core. Благодаря этому стали доступны vue-query, solid-query и svelte-query.

Однако, к сожалению, не существует хороших решений по интеграции react-query с менеджерами состояний. Эта интеграция является весьма очевидной потребностью. В сложных проектах работа через хуки становится обременительной. Хуки связывают нас с жизненным циклом компонентов (например, useEffect выполняется после рендера, useState выполняется в пакетном режиме, а жизненный цикл данных привязан к циклу жизни приложения).

По этой причине сложную логику очень важно вынести за пределы компонентов. Тут возникает проблема, поскольку в основной поставке react-query имеется лишь встроенная в приложение система реактивности.

Многие в такой ситуации либо отказываются от react-query, либо интегрируют его на наименее удобный способ через useEffect.

Поскольку наш проект базировался на mobx, я решил рассмотреть возможности интеграции react-query с mobx. К своему удивлению я обнаружил идеальную интеграцию. Похоже, словно react-query и mobx были созданы друг для друга.