Building data driven mobile applications with React Native and GraphQL

With the rise of both React Native and GraphQL lots of developers ask how to use both of them for building data driven mobile apps.
React Native is a perfect choice for mobile app development and it works very well with GraphQL powered backend. In this talk we will see how we can build React Native application that is powered by GraphQL. We will understand benefits of using GraphQL for server interaction and how we should integrate our GraphQL queries with popular state management systems.

Transcript

1. v n o v i c k . c o m Building data driven mobile apps with React Native GraphQL
2. 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
3. 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
4. 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.”
5. v n o v i c k . c o m
6. v n o v i c k . c o m Data driven mobile apps? Any app driven by data
7. 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
8. v n o v i c k . c o m How we do this today
9. 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
10. 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
11. v n o v i c k . c o m GraphQL A query language for your API
12. v n o v i c k . c o m Queries
13. v n o v i c k . c o m Mutations
14. v n o v i c k . c o m
15. v n o v i c k . c o m It’s Demo time Star Wars GraphQL API
16. 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! }
17. 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), },
18. v n o v i c k . c o m So what’s on the client
19. v n o v i c k . c o m Apollo
20. 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
21. 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));
22. 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 } } } ` <Query query={GET_ALL_POSTS}> {({ loading, error, data }) => { if (loading) return <Text>Loading...</Text>; if (error) return <Text>Error :(</Text>; return this.renderPosts(data.posts) }} </Query> Queries
23. 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";
24. v n o v i c k . c o m <Mutation mutation={CREATE_POST} update={(cache, { data: { createDraft } }) => { const { posts } = cache.readQuery({ query: GET_ALL_POSTS }); cache.writeQuery({ query: GET_ALL_POSTS, data: { posts: posts.concat([createDraft]) } }); }} > {(createPost, { data }) => ( <Button title="CreateDraft" onPress={() => { createPost({ variables: { title: this.state.title, author: this.state.author, content: this.state.content } }); }}/> )} </Mutation> Mutations
25. v n o v i c k . c o m It’s Demo time
26. v n o v i c k . c o m AWS AppSync
27. v n o v i c k . c o m AWS AppSync
28. v n o v i c k . c o m Getting started
29. 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} }); <ApolloProvider client={client}> <Rehydrated> <App /> </Rehydrated> </ApolloProvider> Client setup
30. 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 } } }), })
31. v n o v i c k . c o m Let’s see it in Action
32. 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
33. v n o v i c k . c o m Contact me for consultation vnovick.com Thank you