useQuery- ja useMutation-hookit

@apollo/client-paketin gql-mallimerkkijonotunniste jäsentää GraphQL-kyselymerkkijonon DocumentNodeksi moduulin lataamisen yhteydessä. Määritelkää kyselyt komponenttien ulkopuolella: const GET_USERS = gql`query GetUsers { users { id name email } }`.

Huomautus: tuotantokoodissa käyttäkää gql-tunnisteella käärittyjä yksinkertaisilla lainausmerkeillä rajattuja merkkijonoja. gql-tunniste hyväksyy JavaScript-lähdekoodissa mallimerkkijonon syntaksin.

useQuery(GET_USERS) palauttaa arvot { loading, error, data, refetch, fetchMore, networkStatus }. loading on true alkuperäisen haun aikana. error sisältää mahdolliset GraphQL- tai verkkovirheet. data sisältää kyselyn rakennetta vastaavan kyselytuloksen.

Tarkistakaa loading ja error ensin ennen datan käyttämistä, jotta null-arvoja ei yritetä renderöidä.

Näyttäkää skeleton-komponentti, kun loading on true. Näyttäkää virheilmoitus, jos error on määritetty (käyttäkää error.message-arvoa virheen tekstinä). Näyttäkää varsinainen sisältö vasta, kun data on määritetty ja loading on false.

Tämä kolmen tilan malli (loading / error / data) on Apollo Client -komponenttien vakiomuoto.

data-objekti vastaa GraphQL-kyselyn rakennetta. Kyselyssä query { users { id name } } data.users on joukko {id, name}-objekteja. TypeScript-tyypit täsmäävät, jos käytätte graphql-codegeniä tyypitettyjen hookien generointiin.

Ilman codegeniä data on tyypiltään any. Codegenin kanssa useQuery palauttaa automaattisesti täysin tyypitetyt tiedot.

Välittäkää muuttujat toisena argumenttina: useQuery(GET_USER, { variables: { id: userId } }). Kysely suoritetaan automaattisesti uudelleen, kun userId muuttuu, aivan kuten useEffectin riippuvuustaulukon perusteella.

Apollo Client tallentaa jokaisen kyselyn ja muuttujien yksilöllisen yhdistelmän erikseen välimuistiin, joten GET_USER arvolla id: "1" ja GET_USER arvolla id: "2" saavat toisistaan riippumattomat välimuistimerkinnät.

Estäkää kyselyn suorittaminen välittämällä asetuksiin skip: true: useQuery(GET_USER, { skip: !userId }). Apollo ei lähetä pyyntöä, kun skip on true, ja loading on false sekä data on undefined.

Tämä vastaa Apollossa SWR:n null-avainta ja React Queryn enabled: false -asetusta.

useQueryn palauttama refetch-funktio käynnistää verkkopyynnön fetch policystä riippumatta. Kutsukaa refetch()-funktiota sellaisen käyttäjän toiminnon jälkeen, joka on saattanut muuttaa palvelimen tietoja, esimerkiksi lomakkeen lähettämisen jälkeen.

Välittäkää refetch-funktiolle uudet muuttujat seuraavasti: refetch({ id: newId }, jolloin haku suoritetaan uudelleen eri parametreilla.

Välittäkää asetuksiin notifyOnNetworkStatusChange: true, jotta saatte päivityksiä verkkotilan muuttuessa (haun, uudelleenhaun, kyselyn toiston ja muiden tilanteiden aikana). networkStatus-kenttä sisältää NetworkStatus-enumeraation numeerisen koodin.

Tämä mahdollistaa hienovaraisen "päivitetään parhaillaan"-ilmaisimen näyttämisen taustalla olevan uudelleenhaun aikana ilman nykyisten tietojen piilottamista.

useMutation(CREATE_USER) palauttaa arvot [mutateFunction, { loading, error, data, reset }]. mutate-funktiota kutsutaan, kun käyttäjä lähettää lomakkeen. Se palauttaa Promisen, jonka sisältö on { data, errors }.

Välittäkää syöte mutaatiolle kutsumalla mutate({ variables: { name: 'Alice', email: 'alice@example.com' } }).

Välittäkää useMutation-asetuksiin onCompleted: (data) => navigate('/dashboard') ja onError: (error) => showToast(error.message). Nämä takaisinkutsut suoritetaan, kun mutaatio valmistuu onnistuneesti tai hylätään.

onCompleted vastaanottaa mutaation tulostiedot, joten sitä voi käyttää navigoinnin käynnistämiseen, onnistumisilmoitusten näyttämiseen tai lomakkeiden tyhjentämiseen.

mutate-kutsun optimisticResponse-asetus kirjoittaa keinotekoisen tuloksen välimuistiin heti ennen palvelimen vastausta. Apollo näyttää optimistiset tiedot välittömästi ja korvaa ne sitten todellisen palvelinvastauksen saapuessa.

Jos mutaatio epäonnistuu, Apollo palauttaa välimuistin automaattisesti optimistista päivitystä edeltäneeseen tilaan, joten käyttöliittymä pysyy yhdenmukaisena.

Määritelkää kyselyt gql-tunnisteella, kutsukaa useQuery(QUERY, { variables, skip }) -funktiota ja käsitelkää loading-, error- ja data-tilat. useMutation palauttaa käynnistysfunktion ja tilan sisältävän objektin; kutsukaa sitä muuttujilla ja käsitelkää tulokset onCompleted- ja onError-kutsujen avulla. Optimistiset vastaukset päivittävät välimuistin välittömästi ja palautuvat automaattisesti ennalleen virheen sattuessa.

skip-asetus ja muuttujiin perustuva uudelleenhaku hoitavat ehdollisen ja parametroidun tietojen lataamisen.