Konfiguracja Apollo Client w React

Należy zainstalować @apollo/client i graphql. Pakiet graphql jest zależnością peer, której Apollo Client wymaga do analizowania dokumentów zapytań za pomocą tagu szablonu gql.

W przypadku projektów TypeScript oba pakiety dostarczają własne definicje typów, więc pakiety @types nie są potrzebne.

Należy utworzyć instancję ApolloClient z cache i linkiem. Najprostsza konfiguracja: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Skrócona postać uri tworzy wewnętrznie HttpLink.

Aby uzyskać większą kontrolę, należy ręcznie zbudować łańcuch linków i przekazać go do opcji link zamiast uri.

Należy owinąć aplikację React komponentem ApolloProvider z właściwością client: ApolloProvider client={client}. Dzięki temu instancja Apollo Client jest dostępna dla wszystkich komponentów potomnych za pośrednictwem kontekstu React.

Każde wywołanie useQuery i useMutation w drzewie komponentów automatycznie korzysta z tego klienta, bez konieczności przekazywania właściwości przez kolejne komponenty.

InMemoryCache to domyślny cache Apollo Client. Normalizuje pobrane dane według typu i identyfikatora, przechowując każdą encję pod unikalnym kluczem cache (np. User:1). Gdy dowolne zapytanie pobierze User:1, wszystkie kolejne odczyty tej encji otrzymają zaktualizowane dane.

Normalizacja sprawia, że aktualizacja użytkownika w jednej mutacji automatycznie aktualizuje każdy wynik zapytania zawierający tego użytkownika, bez dodatkowego kodu.

HttpLink obsługuje transport HTTP między Apollo Client a serwerem GraphQL. Należy go skonfigurować za pomocą uri oraz opcjonalnie fetch, headers i credentials.

W zaawansowanych przypadkach linki rozdzielające kierują różne operacje do różnych endpointów: subskrypcje są przesyłane przez WebSocket (WebSocketLink), a zapytania i mutacje przez HTTP (HttpLink).

Należy zaimportować setContext z @apollo/client/link/context. Następnie utworzyć link uwierzytelniania: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Należy połączyć go przed HttpLink: authLink.concat(httpLink).

Link setContext jest uruchamiany przed każdym żądaniem i dynamicznie dodaje nagłówki uwierzytelniania do każdej operacji.

Linki można komponować za pomocą ApolloLink.from([authLink, errorLink, httpLink]) lub authLink.concat(httpLink). Linki działają jak middleware: każdy z nich przetwarza operację i przekazuje ją do next(). Ostatni link w łańcuchu wysyła właściwe żądanie HTTP.

Typowe łańcuchy to: link uwierzytelniania (dodaje nagłówki) + link błędów (obsługuje błędy) + link HTTP (wysyła żądanie).

Należy zaimportować onError z @apollo/client/link/error. Link błędów globalnie przechwytuje błędy GraphQL i błędy sieciowe. Można go użyć do przekierowania na stronę logowania w przypadku błędów UNAUTHENTICATED lub do wyświetlenia globalnego komunikatu o błędzie w przypadku awarii sieci.

Link błędów musi znajdować się przed linkiem HTTP w łańcuchu, ale może wywołać forward(operation), aby ponowić żądanie.

cache-first (domyślna): natychmiast zwraca dane z cache; jeśli są nieaktualne, pobiera je ponownie w tle. network-only: zawsze pobiera dane z serwera i aktualizuje cache. cache-and-network: natychmiast zwraca dane z cache ORAZ pobiera dane, aktualizując interfejs po nadejściu odpowiedzi. cache-only: odczytuje wyłącznie cache i zgłasza błąd, jeśli danych nie ma w cache. no-cache: zawsze pobiera dane i nigdy nie zapisuje ich w cache.

Wybór zależy od wymagań dotyczących aktualności danych: pulpity często korzystają z cache-and-network, a formularze profilu użytkownika z network-only.

Domyślną wartość fetchPolicy należy ustawić w defaultOptions obiektu InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Poszczególne wywołania useQuery mogą nadpisywać to ustawienie dla konkretnego zapytania.

Ustawienie rozsądnej wartości globalnej ogranicza konieczność określania fetchPolicy przy każdym wywołaniu hooka.

Rozszerzenie przeglądarki Apollo Client DevTools dodaje panel Apollo do Chrome DevTools. Pokazuje wszystkie zapytania przechowywane w cache wraz z ich bieżącymi danymi, umożliwia eksplorowanie znormalizowanego cache oraz ponowne uruchamianie zapytań z panelu DevTools.

Rozszerzenie należy zainstalować z Chrome Web Store, a klienta zainicjalizować za pomocą devtools: { enabled: true } (domyślnie w trybie deweloperskim).

W którym miejscu względem httpLink należy umieścić errorLink w łańcuchu linków Apollo Client?

Należy zainstalować @apollo/client i graphql, utworzyć ApolloClient z InMemoryCache i łańcuchem linków oraz owinąć aplikację komponentem ApolloProvider. Łańcuch linków składa się z authLink (dodaje tokeny), errorLink (globalnie obsługuje błędy) i httpLink (zapewnia transport HTTP). Polityka pobierania określa priorytet cache lub sieci, a InMemoryCache normalizuje encje według typu i identyfikatora.

Rozszerzenie przeglądarki Apollo DevTools ułatwia inspekcję cache i debugowanie.