h1 . h2 Platforms
* Native Mobile (iOS, Android, React Native)
* Web Apps (JavaScript)
h1 . h2 Features & API
* specify data requirements with code statements (graphql), using the console editor
* only needed data is fetched
* auto update data in app in realtime
* data can be added & updated locally while offline
* updates data for offline uses as soon as reconnect
* integration with Amazon Cognito & AWS IAM for setting fine grained permissions on graphql operations
** OIDC token based
** authz based on fields e.g. only author can update
* data stored in DynamoDB
* AWS Lambda functions can be triggered
* Run elasticsearch queries on the data
* auto resolve conflicts (default rules & define own business logic via Lambda)
* API Key, IAM, Cognito & OpenID Connect https://docs.aws.amazon.com/appsync/latest/devguide/security.html
* logs can be viewed in the web consoel & written to CloudWatch https://docs.aws.amazon.com/appsync/latest/devguide/monitoring.html#cwl
* default metrics for Latency, 4XX & 5XX errors https://docs.aws.amazon.com/appsync/latest/devguide/monitoring.html#cw-metrics
h1 . h2 GraphQL & Querying
* not a graph DB
* db could be anything e.g. mongodb, mysql, dynamodb
* client sends its request 1 time, parses it and fetches/returns the data to the client in 1 round trip
* model the data and app state of what you need to arrive at
* define a schema defintion language (SDL) e.g.
* benefits
** Type introspection https://en.wikipedia.org/wiki/Type_introspection
*** ability of a program to examine the type or properties of an object at runtime
*** A.instance_of?, a.class, A > B, B <= B
** rapid prototyping
** co-location of data requirements & app views (impl isn't encoded in the server)
** data behaviour control (batching, request/response & real-time)
** bandwidth optimisation
* integrates with apollographql client (plugins for platforms)
** JS for mobile web & hybrid (react native/ionic)
** offline support (automatically persisted data for queries)
** read & write to local disk (dep on platform), fetch to server happens async (no latency from App pov) (Optimistic UI)
** can add a callback for the fetch
* Event driven (handshake auth) for graphQL subscriptions
* auto websocket negotiation
* aws-amplify https://github.com/aws/aws-amplify
** js lib for frontend & mobile dev (for JS frameworks & React + React Native)
** Authentication (OOB uses cognito)
** Analytics
** API
** Storage
** Cache
* example schema available when creating an API via the console
* aws_subscibe to trigger notification to clients
* starter apps e.g
** git clone https://github.com/aws-samples/aws-mobile-appsync-events-starter-android
** download AppSync.json file
** download graphql schema (.json or .graphql)
* Get an API URL & API Key (7 days valid, can be extended to 365 days)
* subscriptions listen for changes to a specific resource
* Java src is generated based on schema & events.graphql, allowing code completion when querying, mutating or subscribing
* uses MQTT over websocket
* each subscription has its own client (MqttSubscriptionClient)
User defined type. (types of Mutation (change) Subscription (subscribe to data))
{noformat}
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
{ / noformat}
Query sent over network (client requests the shape of the data it wants)
{noformat}
query {
getTodos {
id
name
priority
}
}
{ / noformat}
Only requested data is returned:
{noformat}
{
"id": "1",
"name": "Get Milk",
"priority": "1"
},
{
"id": "2",
"name": "Go to gym",
"priority": "5"
},...
{ / noformat}
Example client init
{noformat}
const client = new AWSAppSyncClient({
url: awsconfig.ENDPOINT,
region: AWS.config.region,
auth: {
type: AUTH_TYPE.AWS_IAM,
credentials: Auth.currentCredentials()
}
});
const WithProvider = () => (
<ApolloProvider client={client}>
<Rehydrated>
<AppWithData />
</Rehydrated>
</ApolloProvider>
);
{ / noformat}
Example Optimistic UI
{noformat}
options: {
fetchPolicy: 'cache-and-network' // rather than just network to allow cache first read/write
},
props: (props) => ({
onAdd: post => props.mutate({
optimisticResponse: () => ({
addPost: { __typename: 'Post', content: 'New data!', version: 1, ...post}
}),
})
}),
update: (dataProxy, {data: {addPost}}) => {
const data = dataProxy.readQuery({AllPostsQuery});
data.posts.push(addPost);
dataProxy.writeQuery({AllPostsQuery, data});
}
{ / noformat}
|
|
