Share
Hva du skal skapeI disse veiledningene viser jeg deg hvordan du lager og samhandler med en GraphQL-database ved hjelp av AWS AppSync og React Native. Denne appen har funksjonalitet i sanntid og frakoblet, noe vi kommer ut av esken med AppSync.
I forrige innlegg satte vi opp GraphQL-back-end med Amazon AppSync-tjenesten. Sjekk det ut hvis du ikke allerede har det. Eller, hvis du vil ha en introduksjon til GraphQL, ta en titt på noen av våre andre innlegg.
I dette innlegget vil vi pakke det hele opp ved å gå gjennom byggingen av React Native-klienten. Prosjektet er litt for komplisert å gå deg gjennom trinnvis, men jeg skal forklare prosjektarkitekturen og vise deg nøkkeldelene til kildekoden.
Vår søknad vil ha et hovedinngangspunkt som vil bestå av to fanevisninger. En kategori vil vise byene fra vår GraphQL-database, og den andre vil være inntastingsskjemaet for å legge til en ny by. De byer fanen vil være en navigator som lar brukeren navigere til de enkelte byene.
Vi lagrer hovedkomponentene i kilde mappe, og vil ha andre mapper i src katalog for å holde våre GraphQL-mutasjoner, spørringer og abonnementer.
Vi vil også ha en eiendeler mappe for å holde bildene våre.
For referanse, ta en titt på den endelige koden for denne appen i opplæringen GitHub repo, men jeg vil skissere noen av trinnene jeg tok for å lage appen fra grunnen av.
Først opprettet vi en ny React Native-applikasjon ved hjelp av Expo.
En gang i det nyopprettede prosjektet, installerte vi våre avhengigheter. For funksjonene GraphQL og AppSync brukte vi følgende avhengigheter:
aws-appsync aws-appsync-reager graphql-tag reagerer-apollo uuid
Vi brukte også følgende avhengigheter for brukergrensesnittet:
reagere-navigasjon reager-native-elementene reager-native-vektor-ikoner
Også, når Vector Icons-biblioteket ble installert, koblet vi det til:
Reager-native link reager-native vektor-ikoner
Etter å ha installert våre avhengigheter, lastet vi ned AppSync.js fil fra vår AppSync-konsoll. I vår AppSync prosjektkonsoll valgte vi Reager Native på bunnen, og klikket på oransje nedlasting knappen for å laste ned denne config-filen.
Denne konfigurasjonsfilen inneholder AppSync-klientinformasjonen vi trengte for å opprette en ny klient.
Toppnivået til appen er hvor vi skal gjøre vår konfigurasjon for å koble opp AppSync API med React Native-klienten.Hvis du har brukt Redux eller React Apollo før, vil dette alle være kjent. Hvis du ikke har det, husk bare at et barn av en Forsørger, i vårt tilfelle den ApolloProvider, vil ha tilgang til sin gitte funksjonalitet.
Følgende kode er vår nye App.js fil, som er hovedkomponenten importert fra vår index.js inngangspunkt.
Import React fra "reagere" importere faner fra './src/Tabs' importere AWSAppSyncClient fra "aws-appsync"; importer Rehydrated fra 'aws-appsync-react'; importer ApolloProvider fra 'reagere-apollo'; importer appSyncConfig fra './aw-exports'; const klient = ny AWSAppSyncClient (url: appSyncConfig.graphqlEndpoint, region: appSyncConfig.region, auth: type: appSyncConfig.authType, apiKey: appSyncConfig.apiKey,); const WithProvider = () => (); eksporter standard medProvider
I denne filen setter vi opp en ny AppSync-klient ved hjelp av en kombinasjon av AWSAppSyncClient konstruktør fra AWS-AppSync samt konfigurasjonen i vår AWS-exports.js fil, som gir APIQL-nettadressen, regionen, autentiseringstypen og godkjennings-API-nøkkelen.
Vi pakker inn vårt hovedinngangspunkt, Tabs.js fil som vil holde vår flippnavigasjon, i en ApolloProvider og passere i AppSync-klienten som klientprotokollen. Vi pakker også inn Tabs komponent i a rehydrert komponent som vi importerer fra AWS-AppSync-reagere. Dette vil sørge for at vi har lest fra async lagring og har rehydrert cachen vår før du gjengir brukergrensesnittet.
Nå vil vår app kunne søke etter data fra vårt AppSync-endepunkt, og også for å utføre mutasjoner og abonnementer!
Hovedinngangen til appen er en navigeringsfunksjon, implementert i Tabs.js-filen med React Navigation.
Det vi har gjort her er å lage og eksportere a TabNavigator med to faner. Disse er:
Denne appen har bare en gjenbrukbar komponent, en tilpasset TextInput. Siden vi vil duplisere denne stilen og funksjonaliteten igjen og igjen, bestemte vi oss for å gjøre det til en egen komponent. Inngangskomponenten er implementert i Input.js.
Hovedvisningen til appen er en liste over byer som vi skal hente fra GraphQL. Vi ønsker å kunne navigere fra hver oppført by til en detaljvisning av byen der vi kan legge til steder.
For å gjøre dette, gjør vi Cities.js sin egen StackNavigator, og City.js komponenten vi navigerer til når du velger en by. Når du klikker på en by i byer, Vi sender navn og id som rekvisitter til By.
I denne komponenten henter vi ved hjelp av listCities spørring, og vi abonnerer også på NewCitySubscription, slik at når en ny by legges til, selv fra en annen klient, håndterer vi abonnementet og oppdaterer vårt utvalg av byer. De listCities spørringen gjør en rekke byer tilgjengelig i vår komponent som this.props.cities.
I denne komponenten passerer vi en by som rekvisitter fra navigasjon (tilgjengelig som props.navigation.state.params.city). Vi bruker byen id verdi for å hente listen over steder for den valgte byen ved hjelp av listLocations spørsmål. Vi abonnerer på nye steder på samme måte som hvordan vi abonnerer på nye byer i Cities.js, bruker NewLocationSubscription abonnement. Vi tilbyr også optimisticResponse og Oppdater Fungerer for når en ny by er lagt til.
Til slutt må vi implementere funksjonaliteten for å legge til nye byer i GraphQL API i AddCity.js-filen. For å gjøre dette har vi koblet opp en mutasjon sammen med et skjema som vil ringe createCity, passerer verdien av skjemainngangen.
AddCity har en onAdd funksjon som vi definerer i vår GraphQL-sammensetning, som ikke bare skriver en ny by til GraphQL-databasen, men også implementerer et optimistisk brukergrensesnitt ved hjelp av en kombinasjon av optimisticResponse og Oppdater.
Mutasjoner, spørringer og abonnement er kjernefunksjonaliteten for å integrere med GraphQL API. I vår app er denne funksjonaliteten implementert i Cities.js, City.js, og AddCity.js filer som bruker AppSync-klienten.
La oss se nærmere på hvordan mutasjoner, spørringer og abonnement er implementert i vår kode.
Først, la oss se på hvordan du lager og eksporterer en GraphQL-spørring som kan samhandle med listCities spørring i AppSync-skjemaet. Denne koden er inneholdt i src / spørsmål / ListCities.js fil.
importer gql fra 'graphql-tag'; eksporter standard gql 'spørringslisteCities listCities items navn land id'
Deretter importerer vi dette spørsmålet i Cities.js fil, sammen med noen hjelpere fra reagere-Apollo, og koble opp komponenten som vi ønsker å ha tilgang til disse dataene ved hjelp av komponere og graphql fra reagere-Apollo.
importer compose, graphql fra 'react-apollo' import ListCities fra './queries/ListCities' klasse Cities strekker React.Component // class definition her // nå har tilgang til this.props.cities eksport standard komponere ( graphql (ListCities, props: props => (byer: props.data.listCities? props.data.listCities.items: [],))) (CityList)
Nå har vi tilgang til byarammen fra vår GraphQL-server som en prop. Vi kan bruke this.props.cities å kartlegge over byarammen som kommer inn fra GraphQL.
For å opprette en mutasjon, må vi først opprette en grunnleggende GraphQL-mutasjon og eksportere den. Vi gjør dette i src / mutasjoner / CreateCity.js fil.
import gql fra 'graphql-tag' eksport standard gql 'mutasjon addCity ($ navn: String !, $ land: String !, $ id: ID!) createCity (input: navn: $ navn, land: $ land, id : $ id) navn land id '
Nå kan vi importere denne mutasjonen (sammen med Apollo-hjelperne) i AddCity.js filen og bruk den i en komponent:
importer compose, graphql fra 'react-apollo' import AddCityMutation fra './mutations/AddCity' klassen AddCity utvider React.Component // class definition here // nå har tilgang til this.props.onAdd () eksportstandard komponere (graphql (AddCityMutation, rekvisitter: props => (onAdd: city => props.mutate (variabler: city))))
Nå har vi tilgang til en prop kalles onAdd, som vi sender et objekt vi ønsker å sende til mutasjonen!
Abonnementer tillater oss å abonnere på dataendringer og få dem til å oppdatere i vår søknad i sanntid. Hvis vi skulle endre databasen vår ved å legge til eller fjerne en by, vil vi at vår app skal oppdateres i sanntid.
Først må vi opprette mutasjonen og eksportere den slik at vi kan få tilgang til det i klienten. Vi lagrer dette i src / subscriptionsNewCitySubscriptions.js fil.
importer gql fra 'graphql-tag' eksport standard gql 'abonnement NewCitySub onCreateCity navn land id';
Nå kan vi importere og legge til abonnementet i Cities.js. Vi har allerede sett på hvordan du får byene fra vår API. La oss nå oppdatere denne funksjonaliteten for å abonnere på nye endringer og oppdatere byarammen når en ny by er lagt til.
importer AllCity fra './queries/AllCity' importer NewCitiesSubscription fra './subscriptions/NewCitySubscription'; importer compose, graphql fra 'react-apollo' class Cities strekker React.Component componentWillMount () this.props.subscribeToNewCities (); render () // resten av komponenten her eksporter standard komponere (graphql (ListCities, options: fetchPolicy: 'cache-and-network', rekvisitter: props) => return cities: rekvisitter. data.listCities? props.data.listCities.items: [], subscribeToNewCities: params => props.data.subscribeToMore (dokument: NewCitiesSubscription, updateQuery: (prev, subscriptionData: data: onCreateCity) = = > return ... prev, listCities: __typename: 'CityConnection', elementer: [onCreateCity, ... prev.listCities.items.filter (by => city.id! == onCreateCity.id)]) )) (Byer)
Vi legger til en ny prop kalles subscribeToNewCities, som vi ringer inn componentDidMount. I abonnementet passerer vi i et dokument (abonnementsdefinisjonen) og updateQuery å beskrive hva vi vil skje når denne oppdateringen.
Vi ødelegger createCity (som inneholder mutasjonen) fra rekvisitter som sendes inn i updateQuery funksjon, og returner alle eksisterende verdier sammen med en oppdatert listCities array som inneholder de tidligere byene sammen med de nye bydataene vi kommer fra createCity.
Hva hvis vi ikke vil vente på abonnementet, så returnere de mest oppdaterte dataene fra vår API for å oppdatere brukergrensesnittet vårt?
Hvis en bruker oppretter en ny by, vil vi automatisk legge den til byarammen og få den til å gjengis i vår app før du mottar bekreftelse fra back-end-tjenesten.
Vi kan gjøre det enkelt ved å bruke noen få teknikker og funksjoner.
La oss oppdatere vår AddCityMutation til følgende (du kan se denne koden i AddCity.js kildefilen):
importer compose, graphql fra 'react-apollo' import AddCityMutation fra './mutations/AddCity' klassen AddCity utvider React.Component // class definition here // nå har tilgang til this.props.onAdd () eksportstandard komponere (graphql (AddCityMutation, props: props => (onAdd: city => props.mutate (variabler: by, optimistiskResponse: __typename: 'Mutation', createCity: ... city, __typename: 'City' , oppdatering: (proxy, data: createCity) => const data = proxy.readQuery (spørring: ListCities); data.listCities.items.unshift (createCity); proxy.writeQuery (spørring: ListCities , data);)))) (AddCity)
Her har vi lagt til to nye egenskaper til mutasjonsfunksjonsargumentobjektet:
Accentsconagua
optimisticResponse definerer det nye svaret du vil ha tilgjengelig i oppdateringsfunksjonen.Oppdater tar to argumenter, proxy (som lar deg lese fra hurtigbufferen) og dataene du vil bruke til å gjøre oppdateringen. Vi leser gjeldende cache (proxy.readQuery), legg det til vårt nye element i gruppen av elementer, og skriv deretter tilbake til hurtigbufferen, som oppdaterte brukergrensesnittet vårt.GraphQL blir stadig mer vanlig. Mye av kompleksiteten rundt GraphQL har å gjøre med å administrere bakenden og API-laget. Men verktøy som AppSync abstrakterer denne kompleksiteten og frigjør utviklere fra å bruke mesteparten av tiden til å konfigurere og jobbe på serveren.
Jeg gleder meg til mye mer innovasjon i dette rommet, og kan ikke vente på å se hva annet vi vil se i 2018!
Hvis du er interessert i å bruke AppSync sammen med Serverless-rammen, sjekk ut denne flotte introduksjonen til å bruke de to sammen.
Hvis du vil lære mer om AWS AppSync, vil jeg foreslå å ta en titt på AppSync-hjemmesiden og dokumentasjonen for å bygge en GraphQL-klient.
Hvis du vil bidra til dette prosjektet, kan du koble til vår GitHub repo. Hvis du har noen ideer, kan du sende oss en PR, eller bruk denne appen som startpakke for ditt neste React native GraphQL-prosjekt!
Og i mellomtiden, sjekk ut noen av våre andre React Native opplæringsprogrammer her på Envato Tuts+!
