tanstack-query

TanStack Query to umiejętność do obsługi pobierania i cachowania danych w aplikacjach Svelte. Nauczysz się tworzyć zapytania i mutacje, zarządzać kluczami cache'u, obsługiwać aktualizacje w czasie rzeczywistym przez WebSocket oraz implementować optymistyczne aktualizacje. Skill pokazuje, jak centralizować wywołania API w osobnych plikach per funkcjonalność, używając @exceptionless/fetchclient. Dowiesz się o wzorcach query keys dla bezpieczeństwa typów, invalidacji cache'u, czasach stagnacji danych i refetchowaniu.

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.