tanstack-query

Data fetching and caching with TanStack Query in Svelte. Query patterns, mutations,\ncache invalidation, WebSocket-driven updates, and optimistic updates.\nKeywords: createQuery, createMutation, TanStack Query, query keys, cache invalidation,\noptimistic updates, refetch, stale time, @exceptionless/fetchclient, WebSocket

1. Zainstaluj TanStack Query dla Svelte oraz @exceptionless/fetchclient w swoim projekcie. Umiejętność zakłada, że masz już skonfigurowane środowisko Svelte.

2. Utwórz plik api.svelte.ts w katalogu swojej funkcjonalności (np. src/lib/features/organizations/api.svelte.ts). W tym pliku zaimportuj createQuery, createMutation i useQueryClient z @tanstack/svelte-query, a także useFetchClient z @exceptionless/fetchclient.

3. Zdefiniuj funkcję getOrganizationsQuery(), która zwraca createQuery z queryKey ustawionym na ['organizations'] i queryFn wykonującą żądanie HTTP za pośrednictwem klienta fetch. Obsłuż błędy poprzez sprawdzenie response.ok i wyrzucenie problem details w przypadku niepowodzenia.

4. Stwórz fabrykę queryKeys dla każdej funkcjonalności, definiując klucze cache'u w strukturze hierarchicznej (np. type, id, project). Użyj as const dla bezpieczeństwa typów i spójności w całej aplikacji.

5. Wykorzystaj zwrócone query w komponentach Svelte, aby automatycznie pobierać dane, obsługiwać stany ładowania i błędów, oraz korzystać z wbudowanego cache'u. TanStack Query będzie automatycznie zarządzać czasem stagnacji danych i refetchowaniem.

6. Dla mutacji (zmian danych) użyj createMutation i useQueryClient do invalidacji odpowiednich kluczy cache'u po pomyślnym żądaniu, aby dane zostały odświeżone. Implementuj optymistyczne aktualizacje, aktualizując cache przed potwierdzeniem z serwera.