Share
AWS Amplify tillåter utvecklare att snabbt skapa och ansluta till kraftfulla tjänster i molnet. I den tidigare handledningen lärde du dig hur du konfigurerar Amplify i ett React-projekt och hur du använder autentisering, S3-lagring och hosting. Om du behöver en introduktion till AWS Amplify, se till att kolla in det här inlägget först.
I det här inlägget går vi vidare med React och AWS Amplify, utforska funktioner som ett hanterat GraphQL datalag och lambda funktioner.
Låt oss se hur du lägger till ett AWS AppSync GraphQL API till vårt projekt och börja använda det från vårt projekt.
Det API som vi kommer att skapa kommer att vara ett restaurang API för att vi ska kunna följa med restauranger som vi gillar eller skulle vilja besöka.
För att lägga till GraphQL API till vårt projekt kan vi använda följande kommando:
förstärka lägg till api
Du blir uppmanad att svara på några konfigurationsfrågor. Välj följande alternativ:
När du uppmanas uppdatera scheman till följande och spara sedan filen:
// lokaliserad vid amplifiera-web-app / förstärka / backend / api / TutsGraphQLAPI / schema.graphql typ Restaurant @model id: ID! namn: sträng! beskrivning: String
Detta skapar bara en enda datatyp-Restaurang-med obligatoriska id och namnfält samt en valfri beskrivning.
Låt oss sedan trycka uppdateringarna till vårt konto:
förstärka push
Nu har API skapats!
Vad hände just här? AWS Amplify använde det inbyggda GraphQL Transform-biblioteket för att skapa ett komplett GraphQL API, inklusive ytterligare schema, resolvere och en datakälla.
För att se det nya AWS AppSync API när som helst efter skapandet kan du gå till instrumentpanelen på https://console.aws.amazon.com/appsync och klicka på API som just skapades (var säker på att din region är ställa in korrekt). Inifrån AWS AppSync-instrumentpanelen kan du visa API-konfigurationen och utföra frågor och mutationer i API: n.
Låt oss sedan samverka med API: n från vår React Application.
Det första vi vill göra är att skapa en mutation. I GraphQL är mutationer motsvarande RESTs SÄTTA, TRYCK och RADERA operationer. Eftersom vi inte har några data ännu i vår databas skapar vi en mutation för att skapa ett nytt restaurangobjekt.
För att göra det importeras vi API och graphqlOperation från AWS förstärka, definiera en mutation och sedan exekvera mutationen.
Låt oss titta på ett exempelapp som implementerar en mutation. I App.js, först importerar vi React, vår app CSS och de nödvändiga AWS Amplify-komponenterna.
Importreakt, Komponent från "reagera"; importera "./App.css"; importera withAuthenticator från "aws-amplify-react" import API, graphqlOperation från "aws-amplify"
Därefter definierar vi en mutation för att skapa en restaurang. Vi anger att mutationen accepterar ett namn och en beskrivning och heter createRestaurant. Denna mutation definierades automatiskt när vi skapade Restaurang schema ovan. Observera att mutationen är specificerad i GraphQL-ett domänspecifikt fråtspråk.
const CreateRestaurant = 'mutation ($ name: String !, $ description: String) createRestaurant (inmatning: namn: $ namnbeskrivning: $ description) id namnbeskrivning'
Nu skapar vi vår app komponent.
klass App utökar komponent // skapa initial state state = namn: ", beskrivning:" // uppdateringstillstånd när användaren skriver in i inmatningar onChange = e => this.setState ([e.target.name]: e .target.value) // definiera funktion för att utföra mutation // göra komponenten
Nästa, fortfarande inom App komponent definierar vi en funktion för att utföra mutationen. Detta utför mutationen genom att ringa API.graphql, passerar i mutationen och data.
Accentsconagua
// definiera funktion för att utföra mutation createRestaurant = async () => if (this.state.name === "|| this.state.description ===") returnera försök const restaurant = name: this.state .name, description: this.state.description invänta API.graphql (graphqlOperation (CreateRestaurant, restaurang)) this.setState (name: ", description:") console.log (err) console.log ("error creating restaurant ...")Då gör vi komponenten, kopplar samman våra förändringshandlare och mutationsfunktioner.
// gör komponenten att göra () returnera ()
Slutligen exporterar vi App komponent med autentisering.
exportera standard medAuthenticator (App, includeGreetings: true);
Du ska kunna köra den här koden och börja skapa nya restaurangartiklar i API: n.
Om du vill visa den faktiska datakällan för att se om data finns där öppnar du AWS AppSync-instrumentpanelen, väljer ditt API, klickar på Datakällor i vänstra menyn, och klicka sedan på Resursnamn. Detta öppnar Amazon DynamoDB-tabellen. I tabellen kan du se data i artiklar flik.
Låt oss nu titta på hur man frågar efter data från API: n. Vi genomför detta i tre steg:
Låt oss först definiera frågan i en ny komponent. Återigen använder vi GraphQL-språket för att ange frågan. Vi använder listRestaurants fråga som definierades automatiskt när vi tryckte på Restauranger schema. I nedanstående formulär anges att vi förväntar oss en lista över objekt, var och en med ett namn, en beskrivning och en beskrivning.
const ListRestaurants = 'fråga listRestaurants items id name description
Därefter måste vi lägga till ytterligare ett initialt tillstånd för att hålla en rad restauranger som returneras från servern.
state = name: ", description:", restauranger: []
Vi måste också lägga till en componentDidMount livscykelhändelse för att söka efter data från GraphQL-servern. Denna async-metod uppdaterar komponentstatus när restauranglistan returneras från servern.
async componentDidMount () försök const restaurants = vänta API.graphql (graphqlOperation (ListRestaurants)) console.log ('restauranger:', restauranger) this.setState (restauranger: restaurants.data.listRestaurants.items) catch err) console.log ("felhämtning av data:", fel)
Slutligen skapar vi en komponent som kartlägger restauranger array från komponentstaten till HTML.
this.state.restaurants.map ((r, i) => ())R.name
R.description
Nu när vi kör appen ser vi att data från API: n görs i en lista på skärmen. Appen visar emellertid inga ändringar när data uppdateras, till exempel när du lägger till en ny restaurang.
Så för att börja med, låt oss uppdatera createRestaurant metod för att ge ett optimistiskt svar på användargränssnittet. Just nu när vi skapar ett nytt objekt blir databasen uppdaterad, men användargränssnittet vet ännu inte om det nya objektet. För att åtgärda detta uppdaterar vi restaurangmatrisen i createRestaurant metod genom att lägga till det nya objektet i arrayen:
createRestaurant = async () => if (this.state.name === "|| this.state.description ===") returnera försök const restaurant = namn: this.state.name, description: this. state.description const restaurants = [... this.state.restaurants, restaurant] this.setState (namn: ", beskrivning:", restauranger) väntar API.graphql (graphqlOperation (CreateRestaurant, restaurang)) console.log (' restaurang lyckades skapas! ') fånga (err) console.log ("felskapande restaurang ...")Därefter vill vi kunna arbeta med realtidsdata. I GraphQL kan prenumerationer låta dig lyssna på data i realtid. När nya uppgifter är tillgängliga, avbryts abonnemanget och de nya uppgifterna skickas via abonnemanget. Det är upp till oss på klientsidan att hantera denna nya data.
I vår app abonnerar vi på utbudet av restauranger, och vi skapar en onCreateRestaurant prenumeration som kommer att skjuta när som helst en ny restaurang skapas. Vi tar sedan det nya objektet från prenumerationen, uppdaterar vår befintliga array och ringer sets för att återställa användargränssnittet med de nya data.
Precis som för mutationer och frågor börjar vi genom att definiera prenumerationen i det specifika språket i GraphQL.
// definiera abonnemangskonstanten OnCreateRestaurant = 'prenumeration onCreateRestaurant id namnbeskrivning'
Prenumerationen kommer att skapas i componentDidMount livscykelmetod antingen före eller efter GraphQL-frågan som vi redan har ställt in:
async componentDidMount () försök const restaurants = vänta API.graphql (graphqlOperation (ListRestaurants)) console.log ('restauranger:', restauranger) this.setState (restauranger: restaurants.data.listRestaurants.items) catch felmeddelande (next: eventData => const data = eventData.value.data.onCreateRestaurant console.log (error: 'data:', data) const restaurants = [... this.state.restaurants.filter (r => r.name! == data.name && r.description! == data.description), data] this.setState ( restauranger))Om du öppnar två webbläsarfönster bör du kunna skapa en mutation på en skärm och se uppdateringen hända på alla andra skärmar.
Om du tittar på .filtrera metod som vi använde för att skapa den nya restaurangen matrisen i prenumerationen, kan du se att vi kontrollerar om det finns dubbletter som innehåller både samma namn och beskrivning. Kanske ett bättre sätt att göra detta i produktionen skulle vara att skapa ett unikt klient-ID som också lagras i databasen och filtrera baserat på den identifieraren.
GraphQL är en underbar spetsteknologi, men ibland kräver projektet att vi skapar ett traditionellt REST API. Med AWS Lambda och Amplify är det också enkelt att skapa serverlösa REST APIs med CLI.
När vi skapade GraphQL API användte vi förstärka skapa api kommando. Detta kommando ger oss möjlighet att skapa antingen ett GraphQL API eller ett REST API. REST API kan konfigureras för att använda antingen en fristående serverlös Express-funktion eller en serverlös JavaScript-funktion som är konfigurerad för att fungera med Amazon DynamoDB CRUD-operationer.
Det alternativ vi ska använda för detta API är en serverlös Express-funktion.
Låt oss fortsätta och lägga till den nya funktionen:
förstärka lägg till api
Som vanligt kommer detta att uppmana dig att fylla i några konfigurationsdetaljer. Leverera följande alternativ:
Nu kan du redigera lambda-funktionen lokalt. I filen ersätter vi den befintliga app.get ( '/ folk') metod med följande:
// amplify-web-app / amplify / backend / function / amplifyrestapi / src / app.js app.get ('/ people', funktion (req, res) const people = [namn: "Nader", namn: "Amanda", namn: "Chris", namn: "" res.json (framgång: sant, folk));Detta returnerar bara en konstant lista över namn för demo ändamål. Spara den här filen och fortsätt med följande svar:
Detta har skapat en ny Lambda-funktion lokalt som vi kan uppdatera och trycka på vårt konto efter behov. Koden för denna lambda-funktion finns på förstärka / backend / funktion / amplifyrestapi / src.
Låt oss nu trycka uppdateringarna till vårt konto:
förstärka push
Nu är vår Lambda-funktion igång, och vi kan börja interagera med det!
Låt oss först fråga för data från det nya API och visa det i vårt användargränssnitt. För att göra så använder vi API klass från Amplify, calling API.get. I det föregående avsnittet använde vi API.graphql att göra förfrågningar till vårt GraphQL API, men det finns många metoder som finns tillgängliga i API-klassen. Du kan lära dig mer om API-klassen i de officiella dokumenten.
importera API från "aws-amplify" // 1. Skapa ett tomt antal människor state = people: [] // 2. i komponentDidMount hämtar vi dessa data med hjälp av API-klassen försök const peopleData = vänta API.get ('amplifyrestapi', '/ people') this.setState (people: peopleData.people) fånga (err) console.log ("felhämtning från Lambda API") / / 3. gör folket data till användargränssnittet i renderingsmetoden this.state.people.map ((person, index) => ( Person.name
))Nu borde vi kunna köra appen, hämta personuppgifterna från vårt API och göra det till skärmen.
Förutom att skapa en ny Lambda-funktion, kan vi också uppdatera vår Lambda-funktion från CLI.
Låt oss ändra funktionen för att slå ett API och hämta data istället för hårdkodningskonstanter. För att göra så använder vi Axios bibliotek för att göra HTTP-förfrågningarna, och vi hämtar data från Star Wars API.
För att kunna använda axios måste vi navigera till förstärka / backend / funktion / amplifyrestapi / srcoch installera det där. Axios installeras i Lambda-funktionens projektmapp, inte huvudappmappen, eftersom den kommer att köras på Lambda-funktionens server-sida.
garn lägg till axios # eller npm installationsaxios
Nu när Axios är installerad, uppdaterar vi Lambda-funktionen för att hämta data från Star Wars API:
var axios = kräver (axios) app.get ('/ people', funktion (req, res) axios.get ('https://swapi.co/api/people/') .then (response => res.json (framgång: true, people: response.data.results)) .catch (error => res.json (framgång: falskt, fel)));Spara nu filen och kör förstärka push från huvudprojektmappen för att uppdatera din Lambda-funktion i molnet:
förstärka push
Nu är vårt API uppdaterat och redo att gå!
När vi uppdaterar appen bör vi nu se de data som returneras från Star Wars API.
I den här serien lärde du dig hur du kommer igång med AWS Amplify och lägg till den i ditt React-projekt, samt hur du lägger till autentisering, lagring, hosting och ett GraphQL eller REST API-allt utan att manuellt koda eller tillhandahålla en server . Det är mycket kraft för apputvecklare!
Jag hoppas att dessa inlägg har inspirerat dig att bygga dina egna serverlösa webbapps med hjälp av serverlös teknik och AWS Amplify! Låt oss veta vad du tycker i kommentarerna nedan.
