#новость дня

Стоило мне вчера рассказать, как ловить глобальные ошибки и состояние загрузки в react-query aka TanStack Query, как вышла его пятая версия!

Стоит ещё раз отметить, что начиная с 4 версии react-query стал называться TanStack Query и поддерживать не только React, но и Vue, Svelte, Solid.

Из интересного: поддержка Suspense, улучшенные т. н. бесконечные запросы (для пагинации и скроллинга), новые девтулзы. Но изменение, которое вызвало бурю разного рода эмоций это, конечно, исключение onSuccess и onError событий из определения запросов.

Впрочем, они по этому поводу полгода назад разродились большой статьёй: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose, которую я всем рекомендовал прочитать примерно тогда же.

В общем, обновляемся?

#react #query #tanstack

#заметка дня

Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?

Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.

Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.

Да, даже если мутация, на самом деле, ничего не делает.

А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.

А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.

С мутацией сильно больше телодвижений.

Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.

Ладно, но всё же, как вызвать запрос императивно?

Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:

useQuery<TokenResponse>({
    enabled: false,
    retry: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
    refetchInterval: false,
    queryKey: ['connecting', dsId, connectionKey],
    queryFn: async ({ signal }) => {
         signal?.addEventListener('abort', cancelConnection);
          ...
     }
});

И используем как обычно:

const {
    data: profile,
    refetch: startConnection,
    connectionStatus,
    isFetching: isFetchingConnection,
    isError,
} = useConnect(dataSource, ...);

Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.

Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.

Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.

#react #tanstack #query

#заметка дня

Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?

Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.

Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.

Да, даже если мутация, на самом деле, ничего не делает.

А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.

А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.

С мутацией сильно больше телодвижений.

Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.

Ладно, но всё же, как вызвать запрос императивно?

Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:

useQuery<TokenResponse>({
    enabled: false,
    retry: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
    refetchInterval: false,
    queryKey: ['connecting', dsId, connectionKey],
    queryFn: async ({ signal }) => {
         signal?.addEventListener('abort', cancelConnection);
          ...
     }
});

И используем как обычно:

const {
    data: profile,
    refetch: startConnection,
    connectionStatus,
    isFetching: isFetchingConnection,
    isError,
} = useConnect(dataSource, ...);

Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.

Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.

Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.

#react #tanstack #query #бородач

#инструмент дня

TanStack выпустили Hotkeys — библиотеку обработки клавиатурных сокращений.

Да, давно уже есть react-hotkeys-hook, hotkeys-js, Mousetrap, у части из них тоже есть scopes, refs, sequences и запись макросов.

Но у TanStack Hotkeys всё это сразу считается одной командной системой.

Скоупы, последовательности, удержание клавиш, keyup, rebinding, конфликты, Mod для Ctrl/Cmd, platform-aware отображение сочетаний, работа с editable-элементами и даже devtools. По отдельности почти всё это уже где-то было. Вопрос в том, сколько библиотек и собственного кода вам нужно было собрать вокруг простого keydown, чтобы получить всё сразу.

Ах, да. Framework-agnostic, конечно же.

С Query, Table и Virtual у них уже получалось примерно то же самое. Они редко приносят новую идею как таковую, зато дорабатывают прекрасно.

Hotkeys пока alpha, но почитать документацию стоит хотя бы ради того, чтобы посмотреть, сколько нюансов там вообще.

#tanstack #hotkeys #library