intro to graphql - solution street, llc · 2019-08-07 · origin of graphql developed by facebook...
TRANSCRIPT
![Page 1: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/1.jpg)
INTRO TO GRAPHQLShould you be using it?
Arthur Frankelsolutionstreet.com
![Page 2: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/2.jpg)
1.ORIGIN OF GRAPHQLHow did we get here?
2
![Page 3: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/3.jpg)
ORIGIN OF GRAPHQL◈ Developed by Facebook internally 2012◈ Shared publicly 2015◈ Solve the issue of building a server
component that works seamlessly with web and mobile
3
![Page 4: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/4.jpg)
2.GRAPHQL VS. RESTWhat’s the difference?
4
![Page 5: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/5.jpg)
FIRST LET’S REVIEW REST◈ Representational State Transfer◈ Separation of Client and Server◈ Statelessness◈ HTTP verb, which defines what kind of
operation to perform (GET, PUT, POST, DELETE)
◈ Headers, paths, and message body 5
![Page 6: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/6.jpg)
6
SIMPLE REST CALL◈ Assume banking application returning a specific banking
Transaction along with associated Account name◈ Object (or resource) is coupled with the way you retrieve it◈ Denormalized data on the server to help the UI
![Page 7: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/7.jpg)
NOW LET’S REVIEW GRAPHQL◈ Really an extension of REST◈ Key difference is that resource is decoupled
from the way you retrieve it◈ Server doesn’t change◈ Same as a graph DB?
7
![Page 8: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/8.jpg)
8
DEFINE THE GRAPHQL RESOURCES AND ACTIONS
![Page 9: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/9.jpg)
9
SIMPLE GRAPHQL CALL◈ Query method (instead of GET)◈ Select the fields and hierarchy to retrieve at query time
![Page 10: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/10.jpg)
3.WHY USE GRAPHQL?Let’s use a business example
10
![Page 11: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/11.jpg)
WHAT DO WE ALREADY KNOW?◈ The client can define fields and the hierarchy
for querying the server without changing the server or multiple calls to the server.
◈ Let’s look at a business example...
11
![Page 12: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/12.jpg)
12
OBJECT MODEL (SORT OF)
![Page 13: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/13.jpg)
13
WEB PAGE (TOP)
![Page 14: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/14.jpg)
14
WEB PAGE (BOTTOM)
![Page 15: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/15.jpg)
WHAT DATA TO WE NEED?◈ Customer info (e.g., “Arthur Frankel”)◈ Account info for all accounts (e.g., id, name,
and balances)◈ Banking Transaction info (most recent 3
Transactions) for all accounts or selected account (e.g., date, amount, cleared or not)
15
![Page 16: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/16.jpg)
USING REST HOW MANY CALLS WOULD THIS BE?◈ /customers/1 – retrieve some information
from the customer based on id (e.g., “1”)◈ /customers/1/accounts – retrieve that
customer’s accounts◈ /customers/1/accounts/123/transactions – for
each account, retrieve the most recent three transactions 16
![Page 17: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/17.jpg)
HOW WOULD YOU IMPLEMENT THIS USING REST?◈ How would you retrieve the most recent three
transactions? ◈ How to minimize the number of calls? Would
you have a single REST call to perform all of these three by essentially denormalizing your data?
◈ What if you had different client access requiring different sets of data? 17
![Page 18: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/18.jpg)
BENEFITS OF GRAPHQL◈ Hierarchical ◈ It lets the client specify exactly what data it
needs◈ It uses a type system to describe data
18
![Page 19: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/19.jpg)
4.TOOLS AND LIBRARIESHow do we use GraphQL?
19
![Page 20: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/20.jpg)
GRAPHQL ECOSYSTEM◈ Client libraries - some with bindings to popular JavaScript
libraries and others are independent ◈ Gateways - caching, monitoring, and performance tracking◈ GraphQL servers - responsible for receiving the query from
the client, processing it, and sending back a response◈ Database to GraphQL servers - translation between database
and GraphQL servers and typically provide CRUD operations◈ https://www.graphqlstack.com/ - nice list by software
language20
![Page 21: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/21.jpg)
WHAT I AM USING FOR TODAY’S DEMO
◈ Client library - Apollo Client ◈ GraphQL server - GraphQL yoga◈ Database to GraphQL server - Prisma
21
![Page 22: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/22.jpg)
5.GRAPHQL CONCEPTSWhat else do you need to know before you get started?
22
![Page 23: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/23.jpg)
EXECUTION CONCEPTS
◈ Query – retrieve data◈ Mutation – create, update, and delete
data◈ Subscription – publish/subscribe model
to be notified when data changes, typically implemented with WebSockets
23
![Page 24: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/24.jpg)
OTHER MAIN CONCEPTS
◈ Schema - GraphQL has a typed schema system
◈ Resolvers - tells GraphQL how and where to fetch the data corresponding to a given field
24
![Page 25: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/25.jpg)
6.DEMO SETUPSome items to explain before our demo
25
![Page 26: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/26.jpg)
THINGS TO LOOK AT AND DISCUSS◈ Folder structure of my project - remember it’s GraphQL
yoga talking to Prisma (Postgres)◈ index.js◈ Resolvers - handles authentication, authorization, and any
business functionality and uses our Prisma server for data access (instead of custom code)
◈ prisma/datamodel.graphql, src/generated/prisma.graphql, and src/schema.graphql
26
![Page 27: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/27.jpg)
7.DEMONow the cool stuff...
27
![Page 28: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/28.jpg)
THINGS I WILL DEMO
◈ Prisma Playground & GraphQL Playground
◈ Mutations - Create, Update, and Delete◈ Query & Querying with filters◈ Subscriptions
28
![Page 29: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/29.jpg)
DEMO◈ Playground schema and docs◈ Create Customers◈ Attempt to create a duplicate Customer◈ Create Account◈ Update Account◈ Create Transaction◈ continued... 29
![Page 30: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/30.jpg)
DEMO◈ Query Customers◈ Query Customers with a filter◈ Query Customers with Accounts and
Transactions◈ Query Customer with filter, associated
Accounts, with latest 3 Transactions (this is the business problem discussed earlier)
◈ continued... 30
![Page 31: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/31.jpg)
DEMO◈ Subscription for any mutation of a Transaction◈ Client library usage
31
![Page 32: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/32.jpg)
8.NEGATIVESWhat? I thought we should all switch to GraphQL?
32
![Page 33: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/33.jpg)
CONS OF USING GRAPHQL◈ Resolvers can become very complex and need to
be tested thoroughly◈ Still more difficult in terms of the
implementation than using REST◈ What about N+1? Does Dataloader help?
33
![Page 34: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/34.jpg)
9.REVIEWWhat did we learn?
34
![Page 35: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/35.jpg)
WHAT DID WE LEARN?◈ Origin of GraphQL◈ REST vs. GraphQL◈ Pros and Cons of GraphQL◈ GraphQL Concepts◈ Demo of using GraphQL yoga and Prisma
35
![Page 36: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/36.jpg)
NOTABLE LINKS◈ https://graphql.org/◈ https://www.graphqlstack.com/ - libraries and ecosystem◈ https://github.com/prisma/graphql-yoga◈ https://www.prisma.io/◈ https://www.apollographql.com - client◈ https://github.com/afrankel/solutionstreet-graphql - my server
code◈ https://github.com/afrankel/solutionstreet-graphql-client - my
client code 36
![Page 37: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/37.jpg)
OPEN DISCUSSION◈ Thoughts?◈ When should you use GraphQL on a project?◈ When should you NOT use GraphQL on a
project?
37
![Page 38: INTRO TO GRAPHQL - Solution Street, LLC · 2019-08-07 · ORIGIN OF GRAPHQL Developed by Facebook internally 2012 Shared publicly 2015 Solve the issue of building a server component](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca7eb50d81a11e9771cbbf/html5/thumbnails/38.jpg)
38
THANKS!Any questions?You can contact me via solutionstreet.com or LinkedInWe are always hiring!