Building_a_GraphQL_Client_in_JavaScript_-_Praire_Dev_Con.pdf

We will answer the following questions. What is the philosophy behind GraphQL? How do you architect a scalable schema? How can GraphQL boost productivity? How can you avoid common pitfalls?

We will then get a GraphQL server up and running together, while focusing on exploring real world patterns for architecting our schema. We will discuss and implement practical steps to improve query performance, error handling and caching.

For this workshop, attendees will leave with a working GraphQL server that they have built themselves.

My name is Joe Karlsson, and I am a Software Engineer from the frozen tundra known as Minneapolis, Minnesota. I write code, build teams and give talks. You can follow me on:

Twitter - @JoeKarlsson1
Github - @JoeKarlsson
LinkedIn - /in/joekarlsson
Website - joekarlsson.com

Transcript

1. Building a
 GraphQL Client in JavaScript @JoeKarlsson1 https://github.com/JoeKarlsson/graphql-apollo-demo
2. I AM
 JOE KARLSSON @JOEKARLSSON1 @JOEKARLSSON
3. How’s this going to work? @JoeKarlsson1
4. Imagine This @JoeKarlsson1
5. GET /recent-orders @JoeKarlsson1
6. GET /hydrated-recent-orders GET /hydrate-skus GET /recent-orders?hydrated=true @JoeKarlsson1 ???
7. Source: https://blog.apollographql.com/why-graphql-is-the-future-3bec28193807 @JoeKarlsson1
8. What Is GraphQL? @JoeKarlsson1
9. @JoeKarlsson1
10. REST GRAPHQL SQL MongoDB S3 SQL MongoDB S3 @JoeKarlsson1
11. @JoeKarlsson1
12. @JoeKarlsson1
13. @JoeKarlsson1
14. Why Use GraphQL? @JoeKarlsson1
15. @JoeKarlsson1
16. DECLARATIVE @JoeKarlsson1 { allPosts(orderBy: createdAt_DESC) { id imageUrl description } }
17. DE-COUPLED
 FROM STORAGE SQL MongoDB S3 @JoeKarlsson1
18. VALIDATED AND STRUCTURED type Post { id: ID! imageUrl: String! description: Boolean! } @JoeKarlsson1
19. FACILITATES COLLABORATION ‣ NO MORE WRITING DOCUMENTATION ‣ NO MORE API VERSIONING @JoeKarlsson1
20. SUPER FAST @JoeKarlsson1 ‣ NO MORE OVER FETCHING ‣ NO MORE MULTIPLE ROUNDTRIPS
21. What are the costs? @JoeKarlsson1
22. @JoeKarlsson1
23. More Abstraction = Slower @JoeKarlsson1
24. GraphQl is still very new @JoeKarlsson1
25. GraphQL Timeline @JoeKarlsson1
26. 2012 GRAPHQL CREATED AT FACEBOOK SUPPORT MOBILE NATIVE TEAMS
27. 2015 OPEN SOURCED FIRST SPECIFICATION GRAPHQL.JS @JoeKarlsson1
28. 2016 GITHUB ANNOUNCES GRAPHQL API NEW GRAPHQL WEBSITE FIRST GRAPHQL SUMMIT @JoeKarlsson1
29. 2017 APOLLO CLIENT 2.0 @JoeKarlsson1
30. 2018 PRISMA 1.0 APOLLO ENGINE APOLLO CLIENT 2.1 @JoeKarlsson1
31. Solution Architecture @JoeKarlsson1
32. @JoeKarlsson1
33. Server Client Graph.Cool GraphQL Apollo Client React @JoeKarlsson1
34. GraphQL Schema @JoeKarlsson1
35. @JoeKarlsson1
36. schema { query: Query, mutation: Mutation } @JoeKarlsson1
37. schema { query: Query, mutation: Mutation } type Query { allPosts: [Post!]! } @JoeKarlsson1
38. schema { query: Query, mutation: Mutation } type Query { allPosts: [Post!]! } type Post { id: ID! imageUrl: String! description: Boolean! } @JoeKarlsson1
39. // server/graphql/schema.js const ToDoMongo = require('../database/Todo') schema { query: Query, mutation: Mutation } type Query { allPosts: [Post!]! } type Post { id: ID! imageUrl: String! description: Boolean! resolve: (itemId) => { const foundPosts = new Promise((resolve, reject) => { postMongo.find({ itemId }, (err, posts) => { err ? reject(err) : resolve(posts); }); }); return foundPosts; }, } @JoeKarlsson1
40. @JoeKarlsson1
41. GraphQL Playground @JoeKarlsson1
42. Demo @JoeKarlsson1
43. ‣ All GraphiQL features ‣ Prettify, History, HTTP Headers ‣ Supports realtime
 subscriptions (Apollo) ‣ Standalone App @JoeKarlsson1
44. @JoeKarlsson1
45. @JoeKarlsson1
46. Apollo Client @JoeKarlsson1
47. UI COMPONENTS SQL MongoDB S3 GraphQL Query Requests Data Sends Result Updates UI @JoeKarlsson1
48. DECLARATIVE DATA FETCHING @JoeKarlsson1 const Feed = () => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (error) return <Error /> if (loading || !data) return <Fetching /> return <DogList dogs={data.dogs} /> }} </Query> )
49. @JoeKarlsson1 ZERO-CONFIG CACHING import ApolloClient from 'apollo-boost' // the Apollo cache is set up automatically const client = new ApolloClient()
50. @JoeKarlsson1 COMBINES LOCAL & REMOTE DATA query GetDogByBreed($breed: String!) { dog(breed: $breed) { images { url id isLiked @client } } } `;
51. VIBRANT ECOSYSTEM @JoeKarlsson1 ‣ Apollo Link community links: Pluggable links created by the community ‣ apollo-cache-persist: Simple persistence for your Apollo cache (@jamesreggio) ‣ apollo-storybook-decorator: Wrap your React Storybook stories with Apollo Client (@abhiaiyer91) ‣ AppSync by AWS: Amazon’s real-time GraphQL client uses Apollo Client under the hood
52. Setup // client.js import { ApolloClient } from 'apollo-client' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' const httpLink = new HttpLink({ uri: ‘__GRAPHQL_ENDPOINT__', } const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), }) @JoeKarlsson1
53. // client.js import React from 'react' import ReactDOM from 'react-dom' import ListPage from './components/ListPage' import { ApolloProvider } from 'react-apollo' import { ApolloClient } from 'apollo-client' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' const httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__', }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), }) ReactDOM.render( <ApolloProvider client={client}> <ListPage /> </ApolloProvider>, document.getElementById('root'), ); @JoeKarlsson1
54. Efficient Queries @JoeKarlsson1
55. import gql from 'graphql-tag' const ALL_POSTS_QUERY = gql` { allPosts(orderBy: createdAt_DESC) { id imageUrl description } } ` @JoeKarlsson1
56. import React from 'react' import ListPage from './ListPage' import { Query } from 'react-apollo' import { ALL_POSTS_QUERY } from './graphql' import Loading from './Loading' const ListPageContainer = props => ( <Query query={ALL_POSTS_QUERY} pollInterval={500}> {({ loading, error, posts }) => { if (loading) return <Loading /> if (error) return `Error! ${error.message}` return <ListPage {... posts} {...props} /> }} </Query> ) export default ListPageContainer @JoeKarlsson1
57. @JoeKarlsson1
58. @JoeKarlsson1
59. Effective Mutations @JoeKarlsson1
60. import gql from 'graphql-tag' export const CREATE_POST_MUTATION = gql` mutation CreatePostMutation($description: String!, $imageUrl: String!) { createPost(description: $description, imageUrl: $imageUrl) { id description imageUrl } } ` @JoeKarlsson1
61. import React from 'react' import { Query, Mutation } from 'react-apollo' import { CREATE_POST_MUTATION, ALL_POSTS_QUERY } from './graphql' import CreatePage from './CreatePage' import Loading from './Loading' const CreatePageContainer = props => ( <Query query={ALL_POSTS_QUERY}> {({ loading, error, data }) => { if (loading) return <Loading /> if (error) return <p>`Error! ${error.message}`</p> return ( <Mutation mutation={CREATE_POST_MUTATION}> {createPost => ( <CreatePage {…data} {…props} createPost={createPost} /> )} </Mutation> ) }} </Query> ) export default CreatePageContainer @JoeKarlsson1
62. @JoeKarlsson1
63. @JoeKarlsson1
64. How Can I Learn GraphQL? @JoeKarlsson1
65. 1) REST v GraphQL 2) Graph.Cool 3) Apollo 3) Queries 4) Mutations @JoeKarlsson1
66. @JoeKarlsson1
67. Resources ‣ https://github.com/JoeKarlsson/graphql-apollo-demo ‣ https://www.graph.cool/ ‣ GraphQL Demo Repo ‣ GraphQL Official Docs ‣ GraphQL Hub ‣ Apollo Official Docs @JoeKarlsson1
68. LET’S STAY IN TOUCH @JOEKARLSSON1 @JOEKARLSSON
69. THANK YOU! @JoeKarlsson1