• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

dabit3/appsync-graphql-cities: A real time React Native application built using ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

dabit3/appsync-graphql-cities

开源软件地址(OpenSource Url):

https://github.com/dabit3/appsync-graphql-cities

开源编程语言(OpenSource Language):

JavaScript 64.3%

开源软件介绍(OpenSource Introduction):

React Native and AppSync - Demo Travel App

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.

React Native AppSync

To get started

  1. clone project
git clone https://github.com/dabit3/appsync-graphql-cities.git
  1. change into directory and install dependencies
cd appsync-graphql-cities && yarn || cd appsync-graphql-cities && npm install
  1. Update credentials in ./aws-exports

  2. 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




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap