Getting Started with GraphQL and Atlas | MongoDB .Local SF 2020

GraphQL's principles of simply describing the data you want and getting predictable results have led to an explosion in popularity – replacing REST APIs more and more. With Atlas' new GraphQL service it's simple to generate a schema and API on top of your data, helping you connect your data and application quicker than ever. Today we'll show you the process step-by-step and give you a sneak peak at what's coming next!

Transcript

1. Getting Started with GraphQL And Atlas @JoeKarlsson1
2. @JoeKarlsson1
3. @JoeKarlsson1
4. @JoeKarlsson1
5. { name: “Joe Karlsson”, company: “MongoDB”, title: [ “Developer Advocate”, “Software Engineer” ], } twitter: “@JoeKarlsson1”, twitch: “joe_karlsson”, website: “joekarlsson.com”, opinions: “my own”, links: “bit.ly/GraphQLAtlas” bit.ly/ GraphQLAtlas
6. Before we get started… @JoeKarlsson1
7. Thank you for coming! @JoeKarlsson1
8. Who is this talk for? @JoeKarlsson1
9. @JoeKarlsson1
10. @JoeKarlsson1 A quick audience poll @JoeKarlsson1
11. GraphQL? @JoeKarlsson1
12. Want to follow along? @JoeKarlsson1 http://bit.ly/GraphQLAtlas
13. AGENDA @JoeKarlsson1 ‣ What is GraphQL? ‣ Apollo Client ‣ Making Queries ‣ Mutating Data
14. AGENDA @JoeKarlsson1 ‣ What is GraphQL? ‣ Apollo Client ‣ Making Queries ‣ Mutating Data
15. What Is GraphQL? @JoeKarlsson1
16. @JoeKarlsson1 MFW I first started learning GraphQL
17. Imagine This @JoeKarlsson1
18. GET /api/v2/user/{ID}/recent-orders @JoeKarlsson1 Endpoint Returns [0128, 7298, 6715, … ]
19. @JoeKarlsson1
20. We now need a hydrated list of orders @JoeKarlsson1
21. What’s the best way update our API? @JoeKarlsson1
22. GET /hydrated-recent-orders GET /hydrate-skus GET /recent-orders?hydrated=true @JoeKarlsson1 ???
23. REST GRAPHQL @JoeKarlsson1
24. Why Use GraphQL? @JoeKarlsson1
25. @JoeKarlsson1 Let’s jump in!
26. DECLARATIVE @JoeKarlsson1
27. @JoeKarlsson1
28. CAN USE MULTIPLE COLLECTIONS Users.Info IoT.Data Movies.Data @JoeKarlsson1
29. VALIDATED AND STRUCTURED @JoeKarlsson1
30. @JoeKarlsson1 Control the shape and content of your documents {
 "properties": {
 "_id": {
 "bsonType": "objectId"
 },
 "description": {
 "bsonType": "string"
 },
 "imageUrl": {
 "bsonType": "string"
 }
 }
 }
31. @JoeKarlsson1
32. FACILITATES COLLABORATION @JoeKarlsson1
33. UNIFIES ALL API ENDPOINTS @JoeKarlsson1
34. NO MORE API VERSIONING @JoeKarlsson1
35. NO MORE WRITING DOCUMENTATION @JoeKarlsson1
36. GraphiQL @JoeKarlsson1 One of my favorite features of GraphQL…
37. @JoeKarlsson1
38. GRAPHQL IS NOT A REPLACEMENT FOR COMMUNICATION @JoeKarlsson1
39. *SUPER FAST @JoeKarlsson1
40. @JoeKarlsson1 NO MORE OVER FETCHING
41. @JoeKarlsson1 WHAT I NEEDED { "name": "Joe Karlsson", "company": "MongoDB", "title": [ "Developer Advocate", "Software Engineer" ] } GET /api/user/JoeKarlsson
42. @JoeKarlsson1 vs. What I got
43. @JoeKarlsson1 NO MORE MULTIPLE ROUNDTRIPS
44. *ABSTRACTION ALWAYS ADDS A PERFORMANCE COST @JoeKarlsson1
45. GraphQL makes working with data easy @JoeKarlsson1
46. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL?
47. @JoeKarlsson1 ‣ REST vs GraphQL REST GRAPHQL Getting Started with GraphQL ‣ What is GraphQL?
48. @JoeKarlsson1 ‣ What is GraphQL? ‣ REST vs GraphQL ‣ Why use GraphQL? ‣ Declarative Getting Started with GraphQL
49. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Declarative Getting Started with GraphQL ‣ Why use GraphQL? ‣ Validated and structured ‣ What is GraphQL? {
 "properties": {
 "_id": {
 "bsonType": "objectId"
 },
 "description": {
 "bsonType": "string"
 },
 "imageUrl": {
 "bsonType": "string"
 }
 }
 }
50. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL?
51. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL? ‣ NO MORE WRITING DOCUMENTATION
52. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL? ‣ NO MORE WRITING DOCUMENTATION ‣ NO MORE API VERSIONING
53. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ What is GraphQL? ‣ Makes working with data easy
54. AGENDA @JoeKarlsson1 ‣ What is GraphQL? ‣ Apollo Client ‣ Making Queries ‣ Mutating Data
55. Let’s checkout something practical @JoeKarlsson1 bit.ly/ GraphQLAtlas
56. @JoeKarlsson1
57. Cloud Client MongoDB Atlas GraphQL Apollo Client React @JoeKarlsson1 +
58. A Brief Intro to Apollo @JoeKarlsson1
59. UI COMPONENTS GraphQL Query Requests Data Sends Result Updates UI @JoeKarlsson1
60. @JoeKarlsson1 MAKES WORKING WITH GRAPHQL MUCH EASIER
61. import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-boost'; import { setContext } from 'apollo-link-context'; import CONFIG from '../config'; // Add an Authorization header to each GraphQL request const authLink = setContext((_, { headers }) => ({ headers: { ...headers, Authorization: `Bearer ${CONFIG.accessToken}`, }, })); // Connect Apollo to the GraphQL Endpoint const GRAPHQL_URL = `https://stitch.mongodb.com/api/client/v2.0/app/${STICH_APP_ID}/graphql`; const httpLink = new HttpLink({ uri: GRAPHQL_URL }); // Instantiate the Apollo Client const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), }); Setup Apollo with GraphQL and Atlas
62. Connect Apollo to React Provider function InstaPostApp() { return ( <ApolloProvider client={client}> <App /> </ApolloProvider> ); } import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-boost'; import { setContext } from 'apollo-link-context'; import CONFIG from '../config'; // Add an Authorization header to each GraphQL request const authLink = setContext((_, { headers }) => ({ headers: { ...headers, Authorization: `Bearer ${CONFIG.accessToken}`, }, })); // Connect Apollo to the GraphQL Endpoint const GRAPHQL_URL = `https://stitch.mongodb.com/api/client/v2.0/app/${STICH_APP_ID}/graphql`; const httpLink = new HttpLink({ uri: GRAPHQL_URL }); // Instantiate the Apollo Client const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), }); import React, { Fragment } from 'react'; import { ApolloProvider } from '@apollo/react-hooks';
63. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo?
64. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts + +
65. @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? Getting Started with GraphQL
66. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? ‣ Setup Apollo with GraphQL and Atlas // Connect Apollo to the GraphQL Endpoint const GRAPHQL_URL = `https://stitch.mongodb.com/api/client/v2.0/app/${STICH_APP_ID}/graphql`; const httpLink = new HttpLink({ uri: GRAPHQL_URL }); // Instantiate the Apollo Client const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), });
67. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? ‣ Setup Apollo with GraphQL and Atlas function InstaPostApp() { return ( <ApolloProvider client={client}> <App /> </ApolloProvider> ); } ‣ Connected Apollo to React
68. AGENDA @JoeKarlsson1 ‣ What is GraphQL? ‣ Apollo Client ‣ Efficient Queries ‣ Mutating Data
69. @JoeKarlsson1 MONGODB AUTOMATICALLY GENERATES YOUR QUERIES BASED ON YOUR SCHEMA
70. @JoeKarlsson1
71. @JoeKarlsson1 CONSTRUCTING A GRAPHQL QUERY query { } 1) Is this a Query or a Mutation?
72. @JoeKarlsson1 CONSTRUCTING A GRAPHQL QUERY query { } instaposts { } 2) What do you want to query?
73. @JoeKarlsson1 CONSTRUCTING A GRAPHQL QUERY query { } instaposts { } 3) What data do you want? _id description imageUrl
74. Querying GraphQL with Apollo and React import React, { Fragment } from 'react'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; import ListPage from './ListPage'; const FIND_ALL_INSTAPOSTS = gql` query { instaposts { _id description imageUrl } } `; function ListPageContainer(props) { const { loading, error, data } = useQuery(FIND_ALL_INSTAPOSTS, { pollInterval: 500, }); } export default ListPageContainer; return ( <Fragment> {loading && <div>Loading…<div/>} {error && <div>{`encountered an error: ${error}`}</div>} {data && <ListPage {...data} {...props} />} </Fragment> );
75. @JoeKarlsson1
76. @JoeKarlsson1
77. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries
78. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries
79. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries ‣ How to construct a GraphQL query query { instaposts { _id description imageUrl } } Query or a Mutation? What do you want to query? What data do you want?
80. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries ‣ How to construct a GraphQL query ‣ Querying GraphQL with Apollo and React function ListPageContainer(props) { const { loading, error, data } = useQuery(FIND_ALL_INSTAPOSTS, { pollInterval: 500, }); return ( <Fragment> {loading && <div>Loading…<div/>} {error && <div>{`encountered an error: ${error}`}</div>} {data && <ListPage {...data} {...props} />} </Fragment> ); }
81. AGENDA @JoeKarlsson1 ‣ What is GraphQL? ‣ Apollo Client ‣ Making Queries ‣ Mutating Data
82. mutation ( ) { } @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION Is this a Query or a Mutation?
83. mutation ( ) { } @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION Operation name describes the GraphQL String CreatePostMutation
84. @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION mutation CreatePostMutation( ) { } Arguments allow you to pass data to fields $data: InstapostInsertInput! Argument Type. This is defined by the GraphQl server
85. @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION mutation CreatePostMutation( ) { } $data: InstapostInsertInput! Bang - This means the argument is required.
86. mutation CreatePostMutation( ) { } insertOneInstapost (data: $data) { } @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION Mutation type. This is defined by the GraphQl server $data: InstapostInsertInput! Arguments
87. insertOneInstapost (data: $data) { } @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION mutation CreatePostMutation( ) { } What data do you returned, once the data has been mutated? $data: InstapostInsertInput! _id description imageUrl
88. @JoeKarlsson1 CONSTRUCTING A GRAPHQL MUTATION mutation CreatePostMutation($data: InstapostInsertInput!) { insertOneInstapost(data: $data) { _id description imageUrl } } Query or a Mutation? Operation name Arguments Mutation Type What data do you want?
89. GraphQL Mutations with Apollo and React function CreatePage(props) { let imageUrl = { value: '' }; let description = ''; const [addPost] = useMutation(ADD_INSTAPOST); return ( ); } import React from 'react'; import { useMutation } from '@apollo/react-hooks'; import gql from 'graphql-tag'; // CreatePage.js const ADD_INSTAPOST = gql` mutation CreatePostMutation($data: InstapostInsertInput!) { insertOneInstapost(data: $data) { _id description imageUrl } } `; <form onSubmit={e => { e.preventDefault(); // Invoke the mutation method // and pass in the required variables addPost({ variables: { data: { description: description.value, imageUrl: imageUrl.value, }, }, }); }} > <input id=“imageUrl" ref={url => { imageUrl = url; }} /> <input id="description" ref={str => { description = str; }} /> <button type=“submit">Post</button> </form>
90. @JoeKarlsson1
91. @JoeKarlsson1
92. Do you want to learn GraphQL? @JoeKarlsson1
93. @JoeKarlsson1
94. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL?
95. @JoeKarlsson1 ‣ REST vs GraphQL REST GRAPHQL Getting Started with GraphQL ‣ What is GraphQL?
96. @JoeKarlsson1 ‣ What is GraphQL? Getting Started with GraphQL ‣ REST vs GraphQL ‣ Why use GraphQL?
97. @JoeKarlsson1 ‣ What is GraphQL? ‣ REST vs GraphQL ‣ Why use GraphQL? ‣ Declarative Getting Started with GraphQL
98. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Declarative Getting Started with GraphQL ‣ Why use GraphQL? ‣ Validated and structured ‣ What is GraphQL? {
 "properties": {
 "_id": {
 "bsonType": "objectId"
 },
 "description": {
 "bsonType": "string"
 },
 "imageUrl": {
 "bsonType": "string"
 }
 }
 }
99. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL?
100. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL? ‣ NO MORE WRITING DOCUMENTATION
101. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ UNIFIES ALL API ENDPOINTS ‣ What is GraphQL? ‣ NO MORE WRITING DOCUMENTATION ‣ NO MORE API VERSIONING
102. @JoeKarlsson1 ‣ REST vs GraphQL ‣ Validated and structured ‣ Facilitates Collaboration Getting Started with GraphQL ‣ Why use GraphQL? ‣ Declarative ‣ What is GraphQL? ‣ Makes working with data easy
103. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo?
104. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts + +
105. @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? Getting Started with GraphQL
106. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? ‣ Setup Apollo with GraphQL and Atlas // Connect Apollo to the GraphQL Endpoint const GRAPHQL_URL = `https://stitch.mongodb.com/api/client/v2.0/app/${STICH_APP_ID}/graphql`; const httpLink = new HttpLink({ uri: GRAPHQL_URL }); // Instantiate the Apollo Client const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), });
107. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Introduced InstaPosts ‣ How does Apollo work? ‣ Setup Apollo with GraphQL and Atlas function InstaPostApp() { return ( <ApolloProvider client={client}> <App /> </ApolloProvider> ); } ‣ Connected Apollo to React
108. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries
109. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries
110. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries ‣ How to construct a GraphQL query query { instaposts { _id description imageUrl } } Query or a Mutation? What do you want to query? What data do you want?
111. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ MongoDB automatically generates the queries ‣ How to construct a GraphQL query ‣ Querying GraphQL with Apollo and React function ListPageContainer(props) { const { loading, error, data } = useQuery(FIND_ALL_INSTAPOSTS, { pollInterval: 500, }); return ( <Fragment> {loading && <div>Loading…<div/>} {error && <div>{`encountered an error: ${error}`}</div>} {data && <ListPage {...data} {...props} />} </Fragment> ); }
112. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ Mutating data with GraphQL
113. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ Mutating data with GraphQL ‣ Constructing a GraphQL Mutation mutation CreatePostMutation($data: InstapostInsertInput!) { insertOneInstapost(data: $data) { _id description imageUrl } } Query or a Mutation? Operation name Arguments Mutation Type What data do you want?
114. Getting Started with GraphQL @JoeKarlsson1 ‣ What is GraphQL? ‣ What is Apollo? ‣ Making effective queries ‣ Mutating data with GraphQL ‣ Constructing a GraphQL Mutation ‣ GraphQL mutations with Apollo and React function CreatePage(props) { let imageUrl = { value: '' }; let description = ''; const [addPost] = useMutation(ADD_INSTAPOST); return ( <form onSubmit={e => { e.preventDefault(); addPost({ variables: { data: { description: description.value, imageUrl: imageUrl.value, }, }, }); }} > <input id="imageUrl" ref={url => { imageUrl = url; }} /> <input id="description" ref={str => { description = str; }} /> <button type="submit">Post</button> </form> ); }
115. @JoeKarlsson1 Questions?
116. All resources and links used in this talk can be found here: @JoeKarlsson1 bit.ly/GraphQLAtlas
117. Want $200 in free Atlas credits? @JoeKarlsson1 Use code JOEKARLSSON200 http://bit.ly/JoeKMDBSF
118. Do you have feedback about this talk? @JoeKarlsson1 bit.ly/GraphQLAtlas
119. THANK YOU! @JoeKarlsson1
120. { name: “Joe Karlsson”, company: “MongoDB”, title: [ “Developer Advocate”, “Software Engineer” ], twitter: “@JoeKarlsson1”, twitch: “joe_karlsson”, website: “joekarlsson.com”, links: “bit.ly/GraphQLAtlas” } bit.ly/ GraphQLAtlas
121. Addtional Resources ‣Link to all resources: bit.ly/GraphQLAtlas ‣Source Code: github.com/JoeKarlsson/mongodb-graphql-demo ‣GraphQL Official Docs: graphql.org ‣GraphQL Hub: graphqlhub.com ‣Apollo Official Docs: apollographql.com @JoeKarlsson1 bit.ly/GraphQLAtlas
122. @JoeKarlsson1