https://github.com/dabit3/appsync-graphql-cities
A real time React Native application built using GraphQL & AWS AppSync
https://github.com/dabit3/appsync-graphql-cities
android appsync graphql ios javascript react react-apollo react-native
Last synced: 5 months ago
JSON representation
A real time React Native application built using GraphQL & AWS AppSync
- Host: GitHub
- URL: https://github.com/dabit3/appsync-graphql-cities
- Owner: dabit3
- Created: 2018-02-09T04:58:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-29T17:07:23.000Z (about 7 years ago)
- Last Synced: 2024-11-02T19:34:16.231Z (5 months ago)
- Topics: android, appsync, graphql, ios, javascript, react, react-apollo, react-native
- Language: JavaScript
- Homepage:
- Size: 722 KB
- Stars: 39
- Watchers: 5
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aws-appsync - A real time React Native application built using GraphQL & AWS AppSync
README
# React Native and AppSync - Demo Travel App
This app demonstrates how to integrate React Native & GraphQL using [AppSync](https://aws.amazon.com/appsync/) with optimistic UI and real time subscriptions.
[AppSync](https://aws.amazon.com/appsync/) is part of [AWS Mobile](https://aws.amazon.com/mobile/)
To view the tutorial for how to build this app, see both [part 1](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-and-react-native--cms-30511) and [part 2](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-react-native-and-aws-appsync-the-app--cms-30569) on Tuts Plus.
### To get started
1. clone project
```
git clone https://github.com/dabit3/appsync-graphql-cities.git
```
2. change into directory and install dependencies
```
cd appsync-graphql-cities && yarn || cd appsync-graphql-cities && npm install
```
3. Update credentials in `./aws-exports`
4. Run project in either iOS or Android simulators
___
## AppSync Configuration
For this to work, you must have the following AppSync Schema as well as the `cityId-index` created in your LocationTable (see screenshot below). You must also have the correct resolver mapping template for the `listLocations` query.
#### listLocations request mapping template:
```
{
"version": "2017-02-28",
"operation": "Query",
"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
}
```
#### Schema
```
type City {
id: ID!
name: String!
country: String!
locations: [Location]
}
type CityConnection {
items: [City]
nextToken: String
}
input CreateCityInput {
id: ID!
name: String!
country: String!
}
input CreateLocationInput {
id: ID!
cityId: ID!
name: String!
info: String
}
input DeleteCityInput {
id: ID!
}
input DeleteLocationInput {
id: ID!
}
type Location {
id: ID!
cityId: ID!
name: String!
info: String
}
type LocationConnection {
items: [Location]
nextToken: String
}
type Mutation {
createCity(input: CreateCityInput!): City
updateCity(input: UpdateCityInput!): City
deleteCity(input: DeleteCityInput!): City
createLocation(input: CreateLocationInput!): Location
updateLocation(input: UpdateLocationInput!): Location
deleteLocation(input: DeleteLocationInput!): Location
}
type Query {
getCity(id: ID!): City
listCities(first: Int, after: String): CityConnection
getLocation(id: ID!): Location
listLocations(cityId: ID!, first: Int, after: String): LocationConnection
}
type Subscription {
onCreateCity(id: ID, name: String, country: String): City
@aws_subscribe(mutations: ["createCity"])
onUpdateCity(id: ID, name: String, country: String): City
@aws_subscribe(mutations: ["updateCity"])
onDeleteCity(id: ID, name: String, country: String): City
@aws_subscribe(mutations: ["deleteCity"])
onCreateLocation(
id: ID,
cityId: ID,
name: String,
info: String
): Location
@aws_subscribe(mutations: ["createLocation"])
onUpdateLocation(
id: ID,
cityId: ID,
name: String,
info: String
): Location
@aws_subscribe(mutations: ["updateLocation"])
onDeleteLocation(
id: ID,
cityId: ID,
name: String,
info: String
): Location
@aws_subscribe(mutations: ["deleteLocation"])
}
input UpdateCityInput {
id: ID!
name: String
country: String
}
input UpdateLocationInput {
id: ID!
cityId: ID
name: String
info: String
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
```
### LocationTable index configuration
