v n o v i c k . c o m Building data driven mobile apps with React Native GraphQL

v n o v i c k . c o m Vladimir Novick I n d e p e n d e n t C o n s u l t a n t Web, Mobile, Virtual Reality, Augmented Reality, Mixed Reality & Internet of Things @VladimirNovick

v n o v i c k . c o m https:/ /goo.gl/mYiVmF React Native build mobile apps with JavaScript w Your go-to guide to creating native iOS and Android mobile applications using React and JavaScript

v n o v i c k . c o m The idea of React Native “React Native lets you build mobile apps using JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.”

v n o v i c k . c o m

v n o v i c k . c o m Data driven mobile apps? Any app driven by data

v n o v i c k . c o m What should we consider when developing ! AuthenHcaHon ! Network ! SynchronisaHon ! Offline data access ! State Management ! Real Hme data ! Querying large amount of data ! SubscripHons

v n o v i c k . c o m How we do this today

v n o v i c k . c o m Web servers WebSocket servers PubSub servers Subscrip7on Third party DynamoDB streams AWS Lambda AWS Lambda Elas7cSearch /posts /posts/12 /posts/12/comments

v n o v i c k . c o m REST /posts /posts/:id /posts/:id/comments /posts/:id/comments?limit=12 /authors/:id POST GET PUT DELETE

v n o v i c k . c o m GraphQL A query language for your API

v n o v i c k . c o m Queries

v n o v i c k . c o m Mutations

v n o v i c k . c o m

v n o v i c k . c o m It’s Demo time Star Wars GraphQL API

v n o v i c k . c o m GraphQL SDL type Query { posts: [Post!]! post(id: ID!): Post } type Mutation { createDraft(title: String!, content: String, author: String!): Post addComment(id: ID!, content: String!): ID deletePost(id: ID!): Post publish(id: ID!): Post } type Post { id: ID! title: String! content: String! published: Boolean! author: Author! comments: [Comment] } type Author { id: ID! name: String! } type Comment { id: ID! content: String! }

v n o v i c k . c o m Resolvers Mutation: { createDraft: (parent, args) => { const post = { id: `post_${idCount++}`, title: args.title, content: args.content, comments: [], author: { id: `author_${new Date().getMilliseconds()}`, name: args.author }, published: false, } posts.push(post) return post }, const resolvers = { Query: { posts: () => posts, post: (parent, args) => posts.find(post => post.id === args.id), },

v n o v i c k . c o m So what’s on the client

v n o v i c k . c o m Apollo

v n o v i c k . c o m Apollo crossroads Apollo-boost " Good for a start, quick setup, authenHcaHon, error management, local state management Apollo client # Custom configuraHon, More flexibility

v n o v i c k . c o m Setting Apollo up import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "localhost:5577/graphql" }); import gql from "graphql-tag"; client .query({ query: gql` { posts { title author { name } comments { content } } } ` }) .then(result => console.log(result));

v n o v i c k . c o m Import { Query, Mutation } from “react-apollo"; const GET_ALL_POSTS = gql` query getAllPosts { posts { title author { name } comments { content } } } ` {({ loading, error, data }) => { if (loading) return Loading...; if (error) return Error :(; return this.renderPosts(data.posts) }} Queries

v n o v i c k . c o m const CREATE_POST = gql` mutation createDraft($title:String!, $author:String!, $content:String!) { createDraft(title:$title, author:$author, content:$content) { id title content author { name } comments { content } } } ` Mutations Import { Query, Mutation } from “react-apollo";

v n o v i c k . c o m { const { posts } = cache.readQuery({ query: GET_ALL_POSTS }); cache.writeQuery({ query: GET_ALL_POSTS, data: { posts: posts.concat([createDraft]) } }); }} > {(createPost, { data }) => ( { createPost({ variables: { title: this.state.title, author: this.state.author, content: this.state.content } }); }}/> )} Mutations

v n o v i c k . c o m It’s Demo time

v n o v i c k . c o m AWS AppSync

v n o v i c k . c o m AWS AppSync

v n o v i c k . c o m Getting started

v n o v i c k . c o m import AWSAppSyncClient from "aws-appsync"; import { Rehydrated } from 'aws-appsync-react'; import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link"; import { graphql, ApolloProvider, compose } from 'react-apollo'; import * as AWS from 'aws-sdk'; import awsconfig from './aws-exports'; const client = new AWSAppSyncClient({ url: awsconfig.graphqlEndpoint, region: awsconfig.region, auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey} }); Client setup

v n o v i c k . c o m Queries & Mutations const AllEventWithData = compose( graphql(ListEvents, { options: { fetchPolicy: 'cache-and-network' }, props: (props) => ({ events: props.data.listEvents ? props.data.listEvents.items : [], }) }), graphql(DeleteEvent, { options:{ fetchPolicy: 'cache-and-network' }, props: (props) => ({ onDelete: (event) => { props.mutate({ variables: { id: event.id }, optimisticResponse: () => ({ deleteEvent: { ...event, __typename: 'Event', comments: {__typename:"CommentConnection",items:[], nextToken:null } } }), })

v n o v i c k . c o m Let’s see it in Action

v n o v i c k . c o m Takeaways ! apollo-boost on the client ! graphql-yoga for custom server ! AwsAppsync for all around soluHon ! SubscripHons for real Hme data ! Start using GraphQL for beQer API handling

v n o v i c k . c o m Contact me for consultation vnovick.com Thank you