useQuery- en useMutation-hooks

De gql-template-tag uit @apollo/client parseert een GraphQL-querytekenreeks tijdens het laden van de module naar een DocumentNode. Definieer query's buiten componenten: const GET_USERS = gql`query GetUsers { users { id name email } }`.

Let op: gebruik in productiecode tekenreeksen tussen enkele aanhalingstekens die door gql als een getagde template worden omwikkeld. De gql-tag accepteert de syntaxis van een template literal in JavaScript-broncode.

useQuery(GET_USERS) retourneert { loading, error, data, refetch, fetchMore, networkStatus }. loading is true tijdens het eerste ophalen. error bevat eventuele GraphQL- of netwerkfouten. data bevat het queryresultaat dat overeenkomt met de querystructuur.

Controleer loading en error voordat je data benadert, zodat je voorkomt dat null-waarden worden weergegeven.

Geef een skeletoncomponent weer zolang loading true is. Geef een foutmelding weer als error is gedefinieerd (gebruik error.message voor de fouttekst). Geef de daadwerkelijke inhoud alleen weer wanneer data is gedefinieerd en loading false is.

Dit patroon met drie statussen (loading / error / data) is de standaardstructuur voor Apollo Client-componenten.

Het data-object weerspiegelt de structuur van de GraphQL-query. Voor query { users { id name } } benader je data.users, een array met objecten van het type {id, name}. TypeScript-typen komen overeen als je graphql-codegen gebruikt om getypeerde hooks te genereren.

Zonder codegen is data getypeerd als any. Met codegen retourneert useQuery automatisch volledig getypeerde gegevens.

Geef variabelen door als tweede argument: useQuery(GET_USER, { variables: { id: userId } }). De query wordt automatisch opnieuw uitgevoerd wanneer userId verandert, net als bij een afhankelijkheidsarray van useEffect.

Apollo Client slaat elke unieke combinatie van query + variabelen afzonderlijk in de cache op, dus GET_USER met id: "1" en GET_USER met id: "2" hebben onafhankelijke cache-items.

Geef skip: true op in de opties om te voorkomen dat de query wordt uitgevoerd: useQuery(GET_USER, { skip: !userId }). Apollo verstuurt geen verzoek wanneer skip true is; loading is false en data is undefined.

Dit is het Apollo-equivalent van de null-sleutel van SWR en de optie enabled: false van React Query.

De functie refetch die door useQuery wordt geretourneerd, start ongeacht het fetchbeleid een netwerkverzoek. Roep refetch() aan na een gebruikersactie die de servergegevens mogelijk heeft gewijzigd, bijvoorbeeld na het verzenden van een formulier.

Geef nieuwe variabelen door aan refetch: refetch({ id: newId }) om de gegevens met andere parameters opnieuw op te halen.

Geef notifyOnNetworkStatusChange: true op in de opties om updates te ontvangen wanneer de netwerkstatus verandert (ophalen, opnieuw ophalen, periodiek opvragen enzovoort). Het veld networkStatus bevat een numerieke code uit de NetworkStatus-enum.

Zo kun je een subtiele indicator voor "verversen" tonen wanneer er op de achtergrond opnieuw gegevens worden opgehaald, zonder de huidige gegevens te verbergen.

useMutation(CREATE_USER) retourneert [mutateFunction, { loading, error, data, reset }]. De mutatiefunctie wordt aangeroepen wanneer de gebruiker een formulier verzendt. De functie retourneert een Promise met { data, errors }.

Roep mutate({ variables: { name: 'Alice', email: 'alice@example.com' } }) aan om invoer aan de mutatie door te geven.

Geef onCompleted: (data) => navigate('/dashboard') en onError: (error) => showToast(error.message) door aan de opties van useMutation. Deze terugbelfuncties worden uitgevoerd nadat de mutatie is geslaagd of mislukt.

onCompleted ontvangt de resultaatgegevens van de mutatie en is handig om navigatie te starten, succesmeldingen weer te geven of formulieren te resetten.

De optie optimisticResponse in de mutate-aanroep schrijft onmiddellijk een synthetisch resultaat naar de cache voordat de server antwoordt. Apollo geeft de optimistische gegevens direct weer en vervangt ze door het echte serverantwoord zodra dat binnenkomt.

Als de mutatie mislukt, zet Apollo de cache automatisch terug naar de toestand van vóór de optimistische wijziging, zodat de interface consistent blijft.

Definieer query's met de gql-tag, roep useQuery(QUERY, { variables, skip }) aan en verwerk de statussen loading/error/data. useMutation retourneert een triggerfunctie en een statusobject; roep deze aan met variabelen en verwerk de resultaten via onCompleted en onError. Optimistische resultaten werken de cache onmiddellijk bij en worden bij fouten automatisch teruggedraaid.

De skip-optie en het opnieuw ophalen op basis van variabelen verwerken voorwaardelijk en geparametriseerd laden van gegevens.