This app demonstrates how to integrate React Native & GraphQL using AppSync with optimistic UI and real time subscriptions. AppSync is part of AWS Mobile
To view the tutorial for how to build this app, see both part 1 and part 2 on Tuts Plus. Also follow the instruction below to setup environment for using template.
- install react-native-cli@2.0.1
- install node@latest (mine is v8.11.1). It comes with npm (mine is 5.6.0)
- install git
- install vscode IDE (with powerful extensions and all-in-one view. debuggable in IDE instead of browser. Debugger runner integrated with react-native). Install "React-Native tools" extension.
- Have an aws account.
- clone project
git clone git@github.com:Luffyingw/bigbang-mobile.git
- change into directory and install dependencies
cd bigbang-mobile && yarn || cd bigbang-mobile && npm install
- install storybook and start storybook server
cd bigbang-mobile
npm i -g @storybook/cli
getstorybook
yarn run storybook
-
Update credentials in
./aws-exports
(endpoint, APIkey) -
Run project in either iOS or Android simulators It will download necessary ios/andriod dependencies and build the code
react-native run-ios
or
react-native run-android
A simulator should open (like a cellphone screen) if everything goes through.
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.
{
"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
}
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
}