Building a GraphQL Client in JavaScript

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 talk, attendees will leave with a working GraphQL server that they have built themselves.

Transcript

1. Building a
 GraphQL Client in JavaScript @JOEKARLSSON1
2. I AM
 JOE KARLSSON @JOEKARLSSON1 @JOEKARLSSON
3. What Is GraphQL?
5. REST GRAPHQL SQL MongoDB S3 SQL MongoDB S3
9. Why Use GraphQL?
11. ‣ DECLARATIVE ‣ DE-COUPLED FROM STORAGE ‣ VALIDATED AND STRUCTURED ‣ FACILITATES COLLABORATION ‣ SUPER FAST ‣ NO MORE API VERSIONING
12. GraphQL Timeline
13. 2012 GRAPHQL CREATED AT FACEBOOK SUPPORT MOBILE NATIVE TEAMS
14. 2015 OPEN SOURCED FIRST SPECIFICATION GRAPHQL.JS
15. 2016 GITHUB ANNOUNCES GRAPHQL API NEW GRAPHQL WEBSITE FIRST GRAPHQL SUMMIT
16. 2017 APOLLO CLIENT 2.0
17. 2018 PRISMA 1.0 APOLLO ENGINE APOLLO CLIENT 2.1
18. Solution Architecture
20. Server Client Graph.Cool GraphQL Apollo Client React
21. GraphQL Schema
23. SCALAR TYPES: ‣ INT ‣ FLOAT ‣ STRING ‣ BOOLEAN ‣ ID Type System ENTRY POINTS: ‣ QUERY ‣ MUTATION
24. schema { query: Query, mutation: Mutation }
25. schema { query: Query, mutation: Mutation } type Query { allPosts(skip: Int, take: Int): [Post!]! }
26. schema { query: Query, mutation: Mutation } type Query { allPosts(skip: Int, take: Int): [Post!]! } type Post { id: ID! imageUrl: String! description: Boolean! }
28. GraphQL Playground
29. ‣ All GraphiQL features ‣ Prettify, History, HTTP Headers ‣ Supports realtime
 subscriptions (Apollo) ‣ Standalone App
32. Apollo Client
33. UI COMPONENTS SQL MongoDB S3 GraphQL Query Requests Data Sends Result Updates UI
34. ‣ DECLARATIVE DATA FETCHING ‣ ZERO-CONFIG CACHING ‣ COMBINES LOCAL 
 & REMOTE DATA ‣ VIBRANT ECOSYSTEM
35. 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(), })
36. // 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'), );
37. Efficient Queries
38. import gql from 'graphql-tag' const ALL_POSTS_QUERY = gql` { allPosts(orderBy: createdAt_DESC) { id imageUrl description } } `
39. 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
42. Effective Mutations
43. 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 } } `
44. 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
47. 1) REST v GraphQL 2) Graph.Cool 3) Apollo 3) Queries 4) Mutations
49. THANK YOU!
50. Resources ‣ https://github.com/JoeKarlsson/graphql-apollo-demo ‣ https://www.graph.cool/ ‣ GraphQL Demo Repo ‣ GraphQL Official Docs ‣ GraphQL Hub ‣ Apollo Official Docs
51. LET’S STAY IN TOUCH @JOEKARLSSON1 @JOEKARLSSON