Vermeiden Sie einen erneuten Abruf, wenn ein angeforderter Datumsbereich bereits durch zwischengespeicherte Daten abgede ⇐ JavaScript

[Anonymous]

Ich habe eine Kalenderkomponente, die mithilfe von TanStack Query Ereignisdaten basierend auf einem Datumsbereich aus meinem Backend abruft. Der Kalender unterstützt drei Ansichten: Monat, Woche und Tag.
Beim ersten Laden ruft die Komponente Ereignisse für die Monatsansicht ab. Wenn der Benutzer die Ansicht wechselt oder im Kalender navigiert, ändert sich der Datumsbereich und eine neue Abfrage wird ausgelöst.
Das Problem besteht darin, dass die Komponente häufig Daten für einen Datumsbereich erneut abruft, der vollständig in einem zuvor abgerufenen Bereich enthalten ist.
Wenn beispielsweise nach dem Abrufen des gesamten Monats ein Wechsel zu einer Wochen- oder Tagesansicht innerhalb desselben Monats immer noch eine neue Anforderung auslöst – obwohl die Daten bereits im Cache vorhanden sind.
Ich suche nach einer Möglichkeit zur Strukturierung oder konfigurieren Sie TanStack Query so, dass zwischengespeicherte Daten wiederverwendet werden können, wenn der angeforderte Bereich eine Teilmenge eines vorhandenen Bereichs ist, anstatt eine weitere Netzwerkanfrage zu stellen.
Ich habe darüber nachgedacht, Datumsbereiche in einem separaten Status zu extrahieren und manuell zu verwalten, aber das scheint den Zweck des Caches von TanStack Query zunichte zu machen und wäre auf lange Sicht schwer aufrechtzuerhalten. Idealerweise möchte ich, dass die Abfragekonfiguration oder das Cache-Verhalten selbst damit umgehen.
Aktuelle Implementierung:

Code: Select all

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

return (

);

Code: Select all

// 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()}`,
});
},
});
};

Was ich erreichen möchte:

• Einen größeren Bereich (z. B. einen Monat) einmal abrufen
• Diese zwischengespeicherten Daten für kleinere Bereiche (Woche/Tag) wiederverwenden, die darin liegen
• Duplikate oder unnötige Netzwerkanfragen vermeiden
• Halten Sie die Lösung an den beabsichtigten Mustern von TanStack Query ausgerichtet

Gibt es eine empfohlene Möglichkeit, Abfrageschlüssel, Cache-Daten oder Abfrageverhalten in TanStack Query zu modellieren, um diesen Anwendungsfall zu unterstützen?
Hinweis: Ich verwende einen useReducer anstelle von useState, um den Datumsbereich zu verwalten, weil React-Big-Calendar gibt je nach Ansicht unterschiedliche Bereichsformen aus. Der Reduzierer normalisiert dies, sodass der Bereich immer Start- und Endeigenschaften hat.