Так просто управлять состоянием сервера.
Привет всем, я делаю этот пост, чтобы поделиться с вами библиотекой, которая упростила и увлекла управление состоянием сервера в приложениях React - React Query.
В этом сообщении в блоге я сделаю небольшое введение, объясняя, что привело к его созданию, а затем расскажу, как работает крючок useQuery. Я закончу этот пост показом некоторых настраиваемых конфигураций, которые мы можем сделать, и того, как сделать недействительность кеша, повторную выборку данных и оптимистичные обновления.
До сих пор многие приложения React полагались на глобальное состояние как на способ обмена данными между компонентами и предотвращения бурения опор.
Несмотря на это очевидное преимущество, глобальные данные часто используются плохо и часто используются, не задумываясь о том, должно ли то, что мы добавляем, быть глобальным для нашего приложения. Еще одна вещь, которая часто случается, - это смешивание состояния сервера с состоянием клиента. Итак, в чем разница между состоянием клиента и состоянием сервера?
Состояние клиента
Это тип состояния, которым владеет наше приложение. Это состояние является временным, локальным и обычно не сохраняется между сеансами. Доступ к нему осуществляется с помощью синхронных API-интерфейсов, которые не имеют задержки. Это состояние более надежно, так как обычно оно всегда актуально.
Состояние сервера
Это состояние сохраняется удаленно, что означает, что мы можем разделить право собственности на него с другими приложениями. Он асинхронный, поэтому нам потребуется доступ к нему с помощью асинхронных API. В связи с этими обстоятельствами это означает, что у нас нет гарантий, что это состояние актуально в нашем приложении.
Делая наше глобальное состояние смесью между состоянием сервера и клиента, мы можем в конечном итоге пойти на компромисс, который будет отдавать предпочтение одному типу состояния по сравнению с другим.
Состояние сервера имеет очень специфические проблемы, с которыми мы не сталкиваемся с состоянием клиента. Это такие проблемы, как кэширование, фоновые обновления, дедупликация запросов, обработка устаревших запросов и другие.
Чтобы справиться с этими проблемами и отделить состояние нашего сервера от состояния нашего клиента, был создан React Query.
Что такое React Query?
React Query - это набор хуков для получения, кэширования и обновления асинхронного состояния в React. Это простой и небольшой API, который можно использовать сразу после установки без настройки.
Он не зависит от протокола, поэтому это означает, что мы можем использовать REST, GraphQL или любой другой вариант использования, и он поддерживает такие вещи, как автоматическое кеширование и повторное извлечение из коробки.
Кеширование
Самое замечательное в React Query заключается в том, что кеширование выполняется «за кулисами», и нам нужно минимум беспокоиться об этом.
Давайте посмотрим на useQueryhook.
Каждый вызов useQuery должен выполняться с помощью уникального ключа и функции для разрешения данных.
Ключ должен соответствовать следующим типам:
String | [String, Variables: Object] | falsy | Function => queryKey
Для этого ключа запроса есть некоторые особенности:
- Он должен быть уникальным, так как он будет использоваться внутри для повторной выборки, кэширования и дедупликации связанных запросов.
- Внутри он будет преобразован в массив. Таким образом, если вы предоставите только строку, она будет внутренне преобразована в [‘key’].
- Они детерминированно сериализуются. Это означает, что порядок не имеет значения в случаях, когда мы используем [‘key’, {page, status}] в качестве ключа.
- Ключ передается в качестве параметров функции запроса в том порядке, в котором они появляются в массиве ключей.
- Если ложное значение передается как часть ключа запроса, функция запроса не вызывается. Это замечательно в случаях, когда мы хотим выполнять последовательные запросы (когда нам нужны данные из запроса для выполнения следующего).
Функция запроса должна учитывать следующее:
Function(variables) => Promise(data/error)
Эта последняя часть интересна, потому что означает, что вы можете использовать fetch, axios или все, что есть в вашем приложении, если оно разрешает нужные вам данные.
Некоторые соображения по кешированию
- Обработанные результаты запроса станут устаревшими после их разрешения. Это означает, что они будут автоматически обновляться при каждом новом монтировании или фокусе страницы, если активно свойство refetchOnWindowFocus. Чтобы этого избежать, мы должны указать свойство staleTime.
- Устаревшие запросы будут обновляться, когда пользователь перефокусирует окно браузера. Чтобы избежать этого, мы должны изменить свойство refetchOnWindowFocus.
Аннулирование кеша, повторная выборка данных и оптимистические обновления
В случаях, когда нам нужно выполнить побочные эффекты сервера, такие как создание / обновление / удаление данных, у нас есть ловушка useMutation. Этот хук действительно полезен в случае, если мы хотим выполнить повторную выборку данных из-за некоторых экземпляров POST.
Мы можем использовать его опцию onSuccess для доступа к объекту queryCache и выполнения некоторой повторной выборки запроса и аннулирования текущего кеша. Это можно увидеть в следующем примере.
Если мы хотим, мы также можем использовать параметр onMutate и выполнять оптимистичные обновления. Это позволит нам обновить наш пользовательский интерфейс до того, как мутация произойдет на стороне сервера, поэтому его нужно использовать с осторожностью, так как в случае сбоя мутации мы можем в конечном итоге отобразить несинхронизированные данные для наших пользователей. Чтобы избежать этого последнего варианта использования, мы можем выполнить откат наших изменений.
Конфигурации
Если вы видите, что часто определяете свойство staleTime или любое другое свойство, вы можете использовать ReactQueryConfigProvider, чтобы обернуть свое приложение и установить значения по умолчанию, которые будут использоваться обработчиками React Query.
Заключение
Как видите, с помощью React Query управлять состоянием сервера намного проще.
Если вы хотите узнать больше, я приглашаю вас прочитать официальную документацию и посмотреть Выступление Таннера Линсли на React Summit, где он представляет React Query и показывает более практический пример.
Надеюсь, вам понравилось, и ждите следующих выпусков.
Хороших выходных и до следующего раза!
Примечание команды Plain English
Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующие слова: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!
Кроме того, мы всегда заинтересованы в продвижении хорошего контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо на адрес [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!
