2 sposoby obsługi błędów GraphQL w kliencie Apollo

Jeśli używasz klienta Graphql Apollo z Reactem, istnieją dwa sposoby (dokładniej mówiąc) – dwa poziomy obsługi błędów:

• – poziom operacji
• – poziom aplikacji

Obsługa błędów na poziomie operacji

W tym przypadku masz dostęp do danych, ładowania i pól błędów, a także możesz użyć obiektu błędu, który może być użyty do wyświetlenia warunkowego komunikatu o błędzie.

const { loading, error, data } = useQuery(YOUR_QUERY);

if (error) return <p>Error :(</p>;

Oczywiście można utworzyć komponent odpowiedzialny za wyświetlanie błędów w aplikacji.

import React from 'react';
import PropTypes from 'prop-types';

import classes from './ErrorMessage.module.css';


const ErrorMessage = (props) => {
    const { error, ...rest } = props;

    const shouldDisplayError = error && error.message ?
        <div className={classes.errorMessage} {...rest}>{error.message}</div>
        :
        null
    ;

    return shouldDisplayError;
};

ErrorMessage.propTypes = {
    error: PropTypes.shape({
        message: PropTypes.string.isRequired
    })
};

export default ErrorMessage; 

Ten komponent jest naprawdę prosty. Otrzymuje błąd jako właściwość i wyświetla go użytkownikowi.

Obsługa błędów na poziomie aplikacji

Innym podejściem jest obsługa błędów na poziomie aplikacji. Pozwala to na tworzenie bardziej złożonej logiki.

Obsługa błędów aplikacji pozwala robić z błędami, co tylko chcesz. Można na przykład rejestrować te błędy w konsoli w trybie deweloperskim lub korzystać z zewnętrznych narzędzi do śledzenia błędów, takich jak Sentry, w trybie produkcyjnym.

Mechanizm ten można również wykorzystać do wyświetlania komunikatów dla użytkownika. Wyobraźmy sobie, że mamy Kontekst Wiadomości w aplikacji lub niestandardowy hak i tam przechowujemy całą logikę dodawania/usuwania/wyświetlania wiadomości.

Jeśli korzystasz z obsługi błędów na poziomie aplikacji, możesz przekazywać komunikaty o błędach do menedżera komunikatów/powiadomień i robić z nimi, co chcesz.

Istnieją dwa rodzaje błędów.

1. 1. Błędy GraphQL (jak w poprzednim przykładzie)
2. 2. Błąd sieci (na przykład, jeśli aplikacja utraciła połączenie z Internetem)

Błędy GraphQL

Istnieją trzy rodzaje błędów GraphQL:

• – błąd składni – na przykład błąd w zapytaniu lub mutacji
• – błąd resolvera – na przykład, gdy serwer GraphQL nie był w stanie rozpoznać pola zapytania
• – błąd walidacji – na przykład, gdy dostarczone dane nie przeszły walidacji po stronie serwera.

Należy pamiętać, że w przypadku błędu resolvera serwer GraphQL zwraca częściowe dane, ale jeśli wystąpi błąd składni lub walidacji, serwer w ogóle nie zwraca danych.

W pierwszym przypadku serwer odpowiada kodem statusu 200 , w przeciwnym razie zwraca kod statusu 4xx (dla błędów składni i walidacji).

Błędy sieci

Błędy sieciowe występują, gdy występują problemy z komunikacją z serwerem GraphQL. W takim przypadku serwer zazwyczaj odpowiada kodem statusu odpowiedzi 4xx lub 5xx i nie podaje żadnych danych.

Zasady dotyczące błędów

Domyślnie serwer Apollo zwraca częściowe dane, gdy wystąpi błąd resolvera, ale można zmienić to zachowanie, zmieniając zasady dotyczące błędów. Istnieją trzy zasady dotyczące błędów:

• – none – domyślna – w przypadku wystąpienia błędów pole graphQLErrorsthe jest wypełniane, a pole data jest ustawiane na wartość undefined (nawet jeśli serwer zwróci jakieś dane w odpowiedzi).
• – all – oba pola data i graphQLErrors są wypełnione
• – ignore – pole graphQLErrorsjest ignorowane i nie jest wypełniane

Jak określić politykę błędów

Politykę błędów można określić globalnie lub na poziomie zapytania/mutacji.

Globalna polityka błędów

Politykę błędów dla zapytań i mutacji można ustawić za pomocą obiektu defaultOptions w konstruktorze ApolloClient. Poniższy przykład pokazuje politykę błędów ustawioną dla zapytań i politykę ignorowania dla mutacji.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: 'http://localhost:3000/',
  defaultOptions: {
    query: {
      errorPolicy: 'all',
    },
    mutate: {
      errorPolicy: 'ignore',
    },
  },
});

Polityka błędów operacji

Aby określić politykę błędów na poziomie operacji, należy przekazać pole errorPolicy w obiekcie opcji w następujący sposób:

const { loading, error, data } = useQuery(YOUR_QUERY, { errorPolicy: "ignore" });

Implementacja obsługi błędów na poziomie aplikacji

Aby zaimplementować obsługę błędów na poziomie aplikacji, musimy użyć funkcji o nazwie ApolloLink.

Biblioteka Apollo Link pomaga dostosować przepływ danych między klientem Apollo a serwerem GraphQL. Zachowanie sieciowe klienta można zdefiniować jako łańcuch obiektów łączących, które są wykonywane w sekwencji.

Każdy link powinien reprezentować samodzielną modyfikację operacji GraphQL lub efekt uboczny (taki jak rejestrowanie).

Zapoznaj się z przykładową implementacją obsługi błędów na poziomie aplikacji.

Najpierw zaimportuj funkcję onError.

import { onError } from "@apollo/client/link/error";

Po drugie, utwórz errorLink:

const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
        console.log(graphQLErrors);
    }

    if (networkError) {
        // handle network error
        console.log(networkError);
    }
});

Po trzecie, użyj HttpLink i metody pomocniczej from, aby połączyć pojedynczy link, który może być użyty w kliencie Apollo.

import { ApolloClient, InMemoryCache, ApolloProvider, from, HttpLink } from '@apollo/client';

...

const httpLink = new HttpLink({ uri: 'https://<API_URL>' })

const appLink = from([
    errorLink, httpLink
])

const client = new ApolloClient({
    link: appLink,
    cache: new InMemoryCache(),

});

Podsumowanie

Istnieją dwa rodzaje błędów, które można obsłużyć:

1. błędy sieci
2. Błąd GraphQL

Istnieją trzy zasady dotyczące błędów (wszystkie, ignorowanie i brak), a zasady dotyczące błędów można określić globalnie lub na poziomie operacji.

Co więcej, istnieją dwa poziomy, na których można obsługiwać te błędy:

1. poziom aplikacji
2. poziom komponentu (zapytania/mutacji)

Dzięki obsłudze błędów na poziomie aplikacji można korzystać z narzędzi do śledzenia błędów JavaScript w środowisku produkcyjnym i rejestrować błędy w konsoli w środowiskach lokalnych. Poza tym, można użyć tego mechanizmu do obsługi i wyświetlania błędów w aplikacji.