Избегайте повторной загрузки, если запрошенный диапазон дат уже покрыт кэшированными данными. ⇐ Javascript

[Anonymous]

У меня есть компонент календаря, который извлекает данные о событиях из моего серверного интерфейса с помощью запроса TanStack на основе диапазона дат. Календарь поддерживает три представления: месяц, неделю и день.
При первоначальной загрузке компонент извлекает события для представления месяца. Когда пользователь переключает представления или перемещается по календарю, диапазон дат меняется и запускается новый запрос.
Проблема в том, что компонент часто извлекает данные для диапазона дат, который полностью содержится в ранее выбранном диапазоне.
Например, после получения полного месяца переключение на представление недели или дня внутри того же месяца все равно запускает новый запрос, даже если данные уже существуют в кеше.
Я ищу способ структурировать или настроить TanStack Query так, чтобы он мог повторно использовать кэшированные данные, когда запрошенный диапазон является подмножеством существующего диапазона, вместо того, чтобы делать еще один сетевой запрос.
Я рассматривал возможность извлечения и ручного управления диапазонами дат в отдельном состоянии, но мне кажется, что это противоречит цели кэширования TanStack Query и его будет сложно поддерживать в долгосрочной перспективе. В идеале я бы хотел, чтобы сама конфигурация запроса или поведение кэша справлялись с этим.
Текущая реализация:

Код: Выделить всё

// Calendar client component
const [calendarRange, setCalendarRange] = useDateRange(); // custom reducer hook
const { data: todos } = useCalendarTodo(calendarRange);

return (

);

Код: Выделить всё

// TanStack Query hook
export const useCalendarTodo = (calendarRange: { start: Date; end: Date }) => {
return useQuery({
queryKey: [
"calendarTodo",
calendarRange.start.getTime(),
calendarRange.end.getTime(),
],
queryFn: async () => {
return api.GET({
url: `/api/calendar/todo?start=${calendarRange.start.getTime()}&end=${calendarRange.end.getTime()}`,
});
},
});
};

Чего я пытаюсь достичь:

• Один раз получить больший диапазон (например, месяц)
• Повторно использовать эти кэшированные данные для меньших диапазонов (неделя/день), которые попадают в него
• Избегать дублирования или ненужных сетевых запросов
• Согласовать решение с предполагаемыми шаблонами TanStack Query

Существует ли рекомендуемый способ моделирования ключей запроса, кэширования данных или поведения запроса в TanStack Query для поддержки этого варианта использования?
Примечание: я использую useReducer вместо useState для управления диапазоном дат, потому что response-big-calendar генерирует разные формы диапазона в зависимости от представления. Редьюсер нормализует это, поэтому диапазон всегда имеет начальные и конечные свойства.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ached-data