Недавно я работал над функцией, которая включала запуск вызова graphQL с помощью Apollo Client, и я заметил, что после повторного посещения страницы мне приходилось ждать пару секунд для получения данных. Подождите, разве его нельзя извлечь из кеша? Я проверил, и все казалось в порядке. Вот код, который я использовал.
const { loading, error, data } = useQuery(GET_DOGS, {
fetchPolicy: "cache-and-network",
});
if(loading) return <p>Loading...</p>
if(error) return <p>Oops! Something went wrong!</p>
return data.map(dog => ...)
Где подвох тогда? Выяснилось, что несмотря на то, что данные были доступны в кеше, я все равно отображал статус загрузки. Вот что делает клиент Apollo под капотом с политикой cache-and-network
- Проверяет, кэшировался ли запрос
- Возвращает кешированные данные, если они есть
- Он запускает указанный вами HTTP-вызов и обновляет кеш новыми значениями.
Проблема возникла на третьем шаге, так как хотя кэшированные данные присутствовали на стороне клиента, мой пользовательский интерфейс полагался исключительно на реквизит loading, который здесь вводил в заблуждение. Исправление очень простое, как if(!data && loading) return <p>Loading...</p>, и оно оказалось настоящим крахом, поскольку пользователи заметили значительное улучшение производительности по всей странице, поскольку этот анти-шаблон был в приложении в течение нескольких месяцев!
Были ли у вас собственные головные боли с кэшированием? Вам понравился этот короткий рассказ? Дайте мне знать, что у вас на уме, в разделе комментариев внизу и хорошего дня!
