Share
AWS Amplify tillater utviklere å raskt opprette og koble til kraftige tjenester i skyen. I den forrige veiledningen lærte du hvordan du konfigurerer Amplify i et React-prosjekt og hvordan du bruker autentisering, S3-lagring og hosting. Hvis du trenger en introduksjon til AWS Amplify, sørg for å sjekke det innlegget først.
I dette innlegget går vi videre med React og AWS Amplify, utforsker funksjoner som et administrert GraphQL datalag og lambda funksjoner.
La oss se på hvordan du legger til en AWS AppSync GraphQL API til vårt prosjekt og begynner å bruke det fra vårt prosjekt.
APIen vi skal opprette, vil være en restaurant API for å holde tritt med restauranter som vi liker eller ønsker å besøke.
For å legge til GraphQL API til vårt prosjekt, kan vi bruke følgende kommando:
forsterker legg til api
Du blir bedt om å svare på noen konfigurasjonsspørsmål. Velg følgende alternativer:
Når du blir bedt om det, oppdaterer du skjemaet til følgende, og lagrer deretter filen:
// plassert på amplify-web-app / amplify / backend / api / TutsGraphQLAPI / schema.graphql type Restaurant @model id: ID! Navn: String! beskrivelse: String
Dette skaper bare en enkelt datatype-Restaurant-med obligatoriske id og navnfelter samt en valgfri beskrivelse.
Deretter la vi skyve oppdateringene til vår konto:
forsterk press
Nå har API-en blitt opprettet!
Hva skjedde her? AWS Amplify brukte det innebygde GraphQL Transform-biblioteket til å lage en komplett GraphQL API, inkludert tilleggsskjema, resolvere og en datakilde.
Hvis du vil se den nye AWS AppSync API-en når som helst etter opprettelsen, kan du gå til dashbordet på https://console.aws.amazon.com/appsync og klikke på APIen som nettopp ble opprettet (pass på at regionen din er sett riktig). Fra AWS AppSync-dashbordet kan du se API-konfigurasjonen og utføre spørringer og mutasjoner på API.
Deretter la vi samhandle med API-en fra React Application.
Det første vi ønsker å gjøre er å lage en mutasjon. I GraphQL er mutasjoner tilsvarende RESTs SETTE, TRYKK og SLETT operasjoner. Fordi vi ikke har data ennå i databasen, lager vi en mutasjon for å opprette et nytt restaurantelement.
For å gjøre det, vil vi importere API og graphqlOperation fra AWS Amplify, definere en mutasjon, og deretter utføre mutasjonen.
La oss se på et eksempel-app som implementerer en mutasjon. I App.js, Først importerer vi React, vår app CSS, og de nødvendige AWS Amplify-komponentene.
Import React, Component fra 'reagere'; importer './App.css'; importer withAuthenticator fra 'aws-amplify-react' import API, graphqlOperation fra 'aws-amplify'
Deretter definerer vi en mutasjon for å lage en restaurant. Vi spesifiserer at mutasjonen aksepterer et navn og en beskrivelse og heter createRestaurant. Denne mutasjonen ble definert automatisk da vi opprettet Restaurant skjema over. Merk at mutasjonen er spesifisert i GraphQL-et domenespesifikt spørrespråk.
const CreateRestaurant = 'mutasjon ($ navn: String !, $ description: String) createRestaurant (input: navn: $ navnbeskrivelse: $ description) id navnbeskrivelse'
Nå lager vi vår app-komponent.
klassen App utvider komponent // opprett opprinnelig tilstandstilstand = navn: ", beskrivelse:" // oppdater tilstand når brukeren skriver inn i innganger onChange = e => this.setState ([e.target.name]: e .target.value) // definere funksjon for å utføre mutasjon // gjengi komponenten
Neste, fortsatt innenfor app komponent definerer vi en funksjon for å utføre mutasjonen. Dette utfører mutasjonen ved å ringe API.graphql, passerer i mutasjonen og dataene.
Accentsconagua
// definere funksjon for å utføre mutasjon createRestaurant = async () => if (this.state.name === "|| this.state.description ===") returforsøk const restaurant = navn: this.state .name, beskrivelse: this.state.description avvente API.graphql (graphqlOperation (CreateRestaurant, restaurant)) this.setState (navn: ", beskrivelse:") console.log (feil) console.log ('feilopprettelse av restaurant ...')Da gjengir vi komponenten, kobler opp våre skiftehandler og mutasjonsfunksjoner.
// gjengi komponenten gjengi () return ()
Endelig eksporterer vi app komponent, med autentisering.
eksporter standard medAuthenticator (App, includeGreetings: true);
Du bør kunne kjøre denne koden og begynne å lage nye restaurantelementer i APIen.
For å se den faktiske datakilden for å se om dataene er der, åpne AWS AppSync-dashbordet, velg API, klikk på Datakilder i venstre meny, og klikk deretter på Ressursnavn. Dette åpner Amazon DynamoDB-tabellen. I tabellen kan du se dataene i elementer tab.
La oss se på hvordan du spør etter data fra API-en. Vi implementerer dette i tre trinn:
Først, la oss definere spørringen i en ny komponent. Igjen bruker vi GraphQL-språket til å angi spørringen. Vi bruker listRestaurants spørring som ble automatisk definert når vi presset restauranter skjema. Utsnittet nedenfor angir at vi forventer en liste over elementer, hver med et id, navn og beskrivelse.
const ListRestaurants = 'spørring listRestaurants items id name description
Deretter må vi legge til noen ekstra opprinnelige tilstand for å holde en rekke restauranter returnert fra serveren.
state = name: ", description:", restauranter: []
Vi må også legge til en componentDidMount livssyklushendelse for å søke etter data fra GraphQL-serveren. Denne async-metoden vil oppdatere komponenttilstanden når restaurantlisten returneres fra serveren.
async componentDidMount () prøv const restaurants = avvente API.graphql (graphqlOperation (ListRestaurants)) console.log ('restauranter:', restauranter) this.setState (restaurants: restaurants.data.listRestaurants.items) fangst feil) console.log ('feilsøking av data:', feil)
Til slutt lager vi en komponent som kartlegger restauranter array fra komponenttilstand til HTML.
this.state.restaurants.map ((r, i) => ())R.name
R.description
Nå, når vi kjører appen, ser vi at dataene fra API-en blir gjengitt i en liste på skjermen. Appen viser imidlertid ingen endringer når dataene oppdateres, for eksempel når du legger til en ny restaurant.
Så for startere, la oss oppdatere createRestaurant metode for å gi en optimistisk respons til brukergrensesnittet. Akkurat nå, når vi lager et nytt element, blir databasen oppdatert, men brukergrensesnittet vet ennå ikke om det nye elementet. For å fikse dette oppdaterer vi restaurantmatrisen i createRestaurant metode ved å legge til det nye elementet i arrayet:
createRestaurant = async () => if (this.state.name === "|| this.state.description ===") returforsøk const restaurant = navn: this.state.name, description: this. state.description const restaurants = [... this.state.restaurants, restaurant] this.setState (navn: ", beskrivelse:", restauranter) avventer API.graphql (graphqlOperation (CreateRestaurant, restaurant)) console.log (' restaurant vellykket opprettet! ') catch (err) console.log (' feil oppretter restaurant ... ')Deretter ønsker vi å kunne jobbe med sanntidsdata. I GraphQL kan abonnementer tillate deg å lytte etter data i sanntid. Når nye data er tilgjengelige, blir abonnementet sparket, og de nye dataene sendes ned via abonnementet. Det er opp til oss på klientsiden å håndtere disse nye dataene.
I vår app abonnerer vi på rekke restauranter, og vi lager en onCreateRestaurant abonnement som vil brann når en ny restaurant er opprettet. Vi tar det nye elementet fra abonnementet, oppdaterer vår eksisterende rekkefølge og ringer setState for å gjenopprette brukergrensesnittet med de nye dataene.
Akkurat som for mutasjoner og spørringer begynner vi ved å definere abonnementet i det grafiske domenespesifikke språket.
// definere abonnement const OnCreateRestaurant = 'abonnement onCreateRestaurant id navn beskrivelse'
Abonnementet vil bli opprettet i componentDidMount livscyklusmetode enten før eller etter GraphQL-spørringen vi allerede har satt opp:
async componentDidMount () prøv const restaurants = avvente API.graphql (graphqlOperation (ListRestaurants)) console.log ('restauranter:', restauranter) this.setState (restaurants: restaurants.data.listRestaurants.items) fangst feil) console.log ("feilsøking av data: ', feil) API.graphql (graphqlOperation (OnCreateRestaurant)) .subscribe (next: eventData => const data = eventData.value.data.onCreateRestaurant console.log 'data:', data) const restaurants = [... this.state.restaurants.filter (r => r.name! == data.name && r.description! == data.description), data] this.setState ( restauranter))Nå, hvis du åpner to nettlesere, bør du kunne opprette en mutasjon på en skjerm og se oppdateringen skje på alle andre skjermer.
Hvis du ser på .filter Metode vi brukte til å lage de nye restaurantene i abonnementet, kan se at vi sjekker for å se om det er duplikater som inneholder både samme navn og beskrivelse. Kanskje en bedre måte å gjøre dette i produksjonen ville være å skape en unik klient-ID som også er lagret i databasen og filteret basert på den identifikatoren.
GraphQL er en fantastisk banebrytende teknologi, men noen ganger vil prosjektet kreve at vi oppretter en tradisjonell REST API. Med AWS Lambda og Amplify er det også enkelt å lage serverløse REST APIs ved hjelp av CLI.
Da vi opprettet GraphQL API, brukte vi forsterker lage api kommando. Denne kommandoen gir oss muligheten til å opprette enten en GraphQL API eller en REST API. REST API kan konfigureres til å bruke enten en frittstående serverløs Express-funksjon eller en serverløs JavaScript-funksjon som er forhåndskonfigurert for å fungere med Amazon DynamoDB CRUD operasjoner.
Alternativet vi skal bruke for denne API-en, er en serverløs Express-funksjon.
La oss gå videre og legge til den nye funksjonen:
forsterker legg til api
Som vanlig vil dette be deg om å fylle ut noen konfigurasjonsdetaljer. Gi følgende alternativer:
Nå vil du kunne redigere lambda-funksjonen lokalt. I filen erstatter vi eksisterende app.get ( '/ folk') metode med følgende:
// amplify-web-app / amplify / backend / function / amplifyrestapi / src / app.js app.get ('/ people', funksjon (req, res) const people = [navn: "Nader", navn: "Amanda", navn: "Chris", navn: ""] res.json (suksess: sant, folk));Dette returnerer bare en konstant liste over navn for demoformål. Lagre denne filen, og fortsett med følgende svar:
Dette har skapt en ny Lambda-funksjon lokalt, slik at vi kan oppdatere og presse til vår konto etter behov. Koden for denne lambda-funksjonen er plassert på forsterke / bakstykke / funksjon / amplifyrestapi / src.
La oss nå skyve oppdateringene til vår konto:
forsterk press
Nå er vår Lambda-funksjon oppe, og vi kan begynne å samhandle med den!
Først, la oss spørre om dataene fra den nye API og vise den i vårt brukergrensesnitt. For å gjøre det, bruker vi API klasse fra Amplify, ringer API.get. I den forrige delen brukte vi API.graphql å gjøre forespørsler til GraphQL API, men det finnes mange metoder som er tilgjengelige i API-klassen. Du kan lære mer om API-klassen i de offisielle dokumentene.
importer API fra 'aws-amplify' // 1. I opprinnelig tilstand, opprett en tom rekke mennesker state = people: [] // 2. i componentDidMount, henter vi disse dataene ved hjelp av API-klassen prøve const peopleData = avvente API.get ('amplifyrestapi', '/ people') this.setState (people: peopleData.people) fangst (err) console.log ('feilsøking fra Lambda API') / / 3. gjør folket data til brukergrensesnittet i gjengivelsesmetoden this.state.people.map ((person, index) => ( Person.name
))Nå skal vi kunne kjøre appen, hente personaldataene fra vår API, og gjøre den til skjermen.
I tillegg til å skape en ny Lambda-funksjon, kan vi også oppdatere vår Lambda-funksjon fra CLI.
La oss endre funksjonen for å treffe en API og hente data i stedet for hardkodningskonstanter. For å gjøre det, bruker vi Axios bibliotek for å lage HTTP-forespørsler, og vi henter data fra Star Wars API.
For å bruke aksios må vi navigere til forsterke / bakstykke / funksjon / amplifyrestapi / srcog installer den der. Axios er installert i Lambda-funksjonens prosjektmappe, ikke hovedappmappen, fordi den skal kjøres i Lambda-funksjonens serverside.
garn legg til aksialer # eller npm installasjonsakser
Nå som Axios er installert, oppdaterer vi Lambda-funksjonen for å hente data fra Star Wars API:
var axios = krever ('axios') app.get ('/ people', funksjon (req, res) axios.get ('https://swapi.co/api/people/') .then (response => res.json (suksess: sant, folk: response.data.results)) .catch (error => res.json (suksess: false, error)));Lagre filen og kjør nå forsterk press fra hovedprosjektmappen for å oppdatere Lambda-funksjonen i skyen:
forsterk press
Nå er vår API oppdatert og klar til å gå!
Når vi oppdaterer appen, bør vi nå se dataene som returneres fra Star Wars API.
I denne serien lærte du hvordan du kommer i gang med AWS Amplify, og legg den til i React-prosjektet ditt, samt hvordan du legger til godkjenning, lagring, hosting og en GraphQL eller REST API-alt uten å måtte manuelt kode eller gi en server . Det er mye kraft for app-utviklere!
Jeg håper disse innleggene har inspirert deg til å bygge dine egne serverløse webapps ved hjelp av serverløs teknologi og AWS Amplify! Gi oss beskjed om hva du synes i kommentarene nedenfor.
