Accentsconagua
Share
Wat je gaat creërenIn deze zelfstudies laat ik u zien hoe u een GraphQL-database kunt maken en ermee kunt werken met behulp van AWS AppSync en React Native. Deze app heeft real-time en offline functionaliteit, iets wat we uit de doos halen met AppSync. In deze post beginnen we met het opzetten van de back-end met AppSync.
Een groot voordeel van AppSync is dat het gebruik maakt van GraphQL, een open standaard en een krachtig nieuw paradigma voor het web en mobiele back-end. Als u meer wilt weten over GraphQL, hoe het verschilt van REST-API's en hoe het uw taak als app-ontwikkelaar gemakkelijker kan maken, bekijk dan eens wat van onze GraphQL-inhoud op Envato Tuts+.
In deze berichten bouwen we een reis-app met de naam Steden. Heb je ooit een show op je favoriete voedselkanaal gezien en een geweldige foodtruck gezien, of gesproken met een vriend die net terug was van een reis en erg opgewonden was over de Owl Bar die ze bezocht? Nou, niet meer, we zullen een app voor je bouwen om gelijke tred te houden met al die coole plaatsen die je wilt bezoeken, evenals de steden waar ze zich bevinden.
Deze app demonstreert en implementeert alle functionaliteit die je nodig hebt om een real-world, volledige stack React Native en GraphQL applicatie te bouwen.
Bekijk de GitHub repo van het voorbeeldproject om de voltooide app te zien en mee te volgen.
AppSync biedt een eenvoudige manier om aan de slag te gaan met een schaalbare, realtime GraphQL-server zonder alles zelf te hoeven maken en onderhouden.
Binnen de AppSync-console zullen we alles doen, van het maken van ons GraphQL-schema tot het voorzien van onze database en resolvers. Op de console is ook Graphiql geïnstalleerd, zodat we onze database kunnen testen en bevragen zonder dat er extra instellingen nodig zijn.
We zullen deze configuratie implementeren op onze client, wat ons een naadloze manier geeft om te communiceren met ons GraphQL-eindpunt!
Met AppSync kunt u een van de drie resolver-typen direct uit de verpakking gebruiken: DynamoDB, Elasticsearch of AWS Lambda. We zullen DynamoDB gebruiken in deze tutorial.
Het eerste wat we moeten doen, is een nieuwe AppSync-toepassing maken en ons basisschema toevoegen.
Onze applicatie moet twee reeksen gegevens opslaan - een lijst met steden en een lijst met locaties die we zullen koppelen aan individuele steden binnen de lijst - zodat ons schema twee hoofdgegevenstypen heeft (Stad en locatie).
Om aan de slag te gaan met AppSync, gaat u naar de AWS-console en kiest u AWS AppSync binnen de Diensten drop-down menu.
Zodra we ons in het in het AppSync-dashboard bevinden, moeten we klikken op de Maak een API knop:
Nu hebben we de mogelijkheid om de applicatie een naam te geven (ik bel de mijne TravelApp) en kies het type schema (gewoonte of monster). We zullen de kiezen gewoonte schemaoptie en klik vervolgens op creëren.
Het volgende scherm wordt het dashboard voor de nieuwe applicatie. We zullen meteen wat nuttige informatie te zien krijgen, inclusief de URL voor onze app en de autorisatiemodus. Aan de linkerkant ziet u een paar links: Schema, queries, Data bronnen, en instellingen.
Kijk eens rond bij de opties hier voordat u doorgaat naar de volgende stap.
Het volgende dat we zullen doen is het schema maken dat we zouden willen gebruiken voor onze applicatie. Nogmaals, het schema zal een stad en Plaats type om te beginnen.
Klik in de editor op de Schema tab en maak het volgende basisschema met twee typen en één query en klik Opslaan:
type Plaats id: ID! naam: String! land: String! locaties: [Locatie] type Locatie id: ID! cityId: ID! naam: String! info: String type Query fetchCity (id: ID!): Stad schema query: Zoekopdracht
Nu we een basisschema hebben gemaakt, moeten we dit schema koppelen aan een database!
AppSync maakt dit extreem gemakkelijk. Klik op de Maak bronnen knop aan de rechterkant van het scherm. We hebben twee databasetabellen nodig: een om onze steden te houden en een andere om onze locaties te houden.
Kiezen stad, accepteer alle standaardinstellingen en klik op creëren. U zult merken dat dit automatisch enkele nuttige vragen, mutaties en abonnementen zal toevoegen aan ons schema!
Ga je gang en doe hetzelfde voor de Plaats bron. We hebben nu met succes twee databasetabellen gemaakt die samengaan met ons schema, en ook enkele basisquery's, mutaties, abonnementen en resolvers die het schema naar die tabellen in kaart brengen (we zullen de resolvers in de volgende sectie verkennen).
Laten we nu eens kijken naar wat er is gemaakt. Klik in het menu aan de linkerkant op Data bronnen.
U zou nu de twee gegevensbronnen moeten zien die we zojuist hebben gemaakt!
Nu we nieuwe mutaties en abonnementen hebben gemaakt in ons schema, laten we ze toevoegen aan onze Schema-definitie.
Hiervoor gaat u naar de onderkant van het schema en werkt u de schemadefinitie bij naar het volgende:
schema query: querymutatie: mutatieabonnement: abonnement
Vervolgens kunnen we alles testen door een mutatie en vervolgens een query te maken. In de queries tab, maak de volgende mutatie:
mutation createCity createCity (input: id: "00001" naam: "Seattle" land: "USA") id
Hiermee wordt een record voor Seattle toegevoegd aan de stadstabel, met een ID van 00001.
Maak vervolgens een query om die gegevens op te halen:
query getCity getCity (id: "00001") id name country
Wanneer u op de oranje afspeelknop klikt, kunt u ervoor kiezen om de knop uit te voeren createCity mutatie of de getCity query. Voer ze allebei uit en u zou de Seattle-stadsgegevens moeten zien teruggehaald en uitgevoerd aan de rechterkant van het scherm.
Als u wilt zien hoe deze gegevens in de database worden weergegeven, kunt u de DynamoDB-stadstabel verkennen die is gelinkt vanuit de Data bronnen tab.
U vraagt zich misschien af hoe de query zo naadloos op de database is afgestemd. Het antwoord is resolvers!
Als u naar de rechterkant van de AppSync-dashboard kijkt Schema In het tabblad ziet u een sectie met de titel Datatypes. Dit geeft een overzicht van alle gegevenstypen binnen ons Schema. Rechts van elk veld zien we een kop met het label resolver.
Resolvers zijn in feite de interface tussen het schema en de database die we momenteel gebruiken. We kunnen resolvers gebruiken voor alles van het eenvoudig ophalen van items tot complexe acties zoals fijnmazig toegangsbeheer.
Resolvers worden geschreven in een DSL genaamd Velocity Templating Language (VTL). AppSync levert automatisch basale resolvers bij het maken van gegevensbronnen, maar ze zijn zeer configureerbaar. Op dit moment hoeven we niet veel te veranderen in onze resolvers, maar laten we eens kijken naar drie van de belangrijkste typen resolvers die u waarschijnlijk in de echte wereld zult moeten gebruiken. Deze zijn verbonden met de volgende basisbewerkingen:
In de Datatypes tab, naast de schemadefinities, vind getCity onder vraag, en klik op CityTable.
Dit zou u naar het resolver configuratiescherm moeten brengen. Op dit scherm ziet u dat er drie hoofdonderdelen zijn voor een resolver:
De databron is de tafel waarmee u wilt communiceren.
De aanvraag kaartsjabloon beschrijft hoe de database het verzoek zal afhandelen.
Hier kunt u uw eigen mappingsjabloon schrijven of kiezen uit een selectie van vooraf ingestelde sjablonen voor basisacties, zoals het ophalen of plaatsen van een item, onder andere.
Hier ziet u de sjabloon voor het verkrijgen van een artikel.
De respons mapping template beschrijft hoe om te gaan met de reactie van de database.
In onze antwoordsjabloon geven we eigenlijk gewoon het context.result en verpakken in de $ utils.toJson hulpprogramma functie. Dit is slechts een van de vele hulpstukken waarmee een deel van de VTL-boilerplaat wordt weggevaagd. Zie de volledige lijst met gebruiksmethoden in de officiële documentatie.
Naarmate uw toepassing ingewikkelder wordt, is de sleutel om bekwaam te worden in AppSync comfortabel om met deze mappingsjablonen te werken. Het kostte me een paar uur om mijn hoofd rond te winden hoe alles werkte, maar na er een tijdje mee te experimenteren, kon ik zien hoe krachtig het is.
We hebben hier geen ruimte om alle details van resolver-mappingsjablonen in te voeren, maar u kunt de Resolver Resolver Mapping Template-verwijzing en Mapping Template-contextreferentie raadplegen voor meer informatie over hen.
Voor nu gaan we verder en voltooien ons schema.
We hebben ons schema voltooid, maar we hebben nog een laatste stap voordat we kunnen beginnen met de interactie met ons nieuwe GraphQL-eindpunt uit onze React Native-toepassing.!
Omdat we al onze locaties in één tabel opslaan, maar deze vragen op basis van de stad die we momenteel bekijken, moeten we een secundaire index maken zodat we efficiënt locaties kunnen opvragen met een bepaalde cityId.
Ga naar als u een secundaire index wilt maken Data bronnen en klik op de Locatietabel hyperlink.
Dit zou u naar de DynamoDB-tabelweergave voor de locatietabel moeten brengen. Klik hier op Indexes tab en maak een nieuwe index met een partitiesleutel van cityId.
U kunt de lees- en schrijfcapaciteitseenheden verlagen tot 1 voor de doeleinden van deze tutorial.
Vervolgens moeten we ons updaten listLocations vraag om dit te accepteren cityId als een argument, dus werk de query bij listLocations Naar het volgende:
type Query // alle vorige query's zijn weggelaten listLocations (cityId: ID !, first: Int, after: String): LocationConnection
Nu moeten we ons updaten listLocations resolver om dit nieuwe te gebruiken cityId inhoudsopgave! Vergeet niet dat we het echt alleen willen listLocations om een reeks locaties terug te geven voor de stad waarnaar we kijken, dus de listLocations resolver neemt de cityId als een parameter en alleen locaties retourneren voor die stad.
Laten we de sjabloon voor aanvraagtoewijzing bijwerken om dit te laten werken listLocations om het volgende te zijn:
"versie": "2017-02-28", "bewerking": "Zoekopdracht", "index": "cityId-index", "query": "expression": "cityId =: cityId", "expressionValues" : ": cityId": "S": "$ ctx.args.cityId", "limit": #if ($ context.arguments.limit) $ context.arguments.limit #else 10 #end, "nextToken": #if ($ context.arguments.nextToken) "$ context.arguments.nextToken" #else null #end
In deze zelfstudie hebben we de back-end gemaakt voor een React Native-app met een eigen GraphQL-eindpunt. We hebben ook gekeken naar het maken en bijwerken van resolvers en werken met het AppSync-schema.
Nu we klaar zijn met het configureren van alles in de console, kunnen we doorgaan en onze React Native-client maken! In de volgende post duik ik in de React Native mobiele app en laat je zien hoe React Native gehaakt kan worden tot AppSync.
Bekijk in de tussentijd een aantal van onze andere berichten over de ontwikkeling van de React Native-app!
Sommige afbeeldingen worden met tegoed gebruikt van Amazon Web Services, Inc.
