INTRO TO GRAPHQLShould you be using it?
Arthur Frankelsolutionstreet.com
1.ORIGIN OF GRAPHQLHow did we get here?
2
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
2.GRAPHQL VS. RESTWhat’s the difference?
4
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
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
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
8
DEFINE THE GRAPHQL RESOURCES AND ACTIONS
9
SIMPLE GRAPHQL CALL◈ Query method (instead of GET)◈ Select the fields and hierarchy to retrieve at query time
3.WHY USE GRAPHQL?Let’s use a business example
10
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
12
OBJECT MODEL (SORT OF)
13
WEB PAGE (TOP)
14
WEB PAGE (BOTTOM)
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
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
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
BENEFITS OF GRAPHQL◈ Hierarchical ◈ It lets the client specify exactly what data it
needs◈ It uses a type system to describe data
18
4.TOOLS AND LIBRARIESHow do we use GraphQL?
19
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
WHAT I AM USING FOR TODAY’S DEMO
◈ Client library - Apollo Client ◈ GraphQL server - GraphQL yoga◈ Database to GraphQL server - Prisma
21
5.GRAPHQL CONCEPTSWhat else do you need to know before you get started?
22
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
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
6.DEMO SETUPSome items to explain before our demo
25
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
7.DEMONow the cool stuff...
27
THINGS I WILL DEMO
◈ Prisma Playground & GraphQL Playground
◈ Mutations - Create, Update, and Delete◈ Query & Querying with filters◈ Subscriptions
28
DEMO◈ Playground schema and docs◈ Create Customers◈ Attempt to create a duplicate Customer◈ Create Account◈ Update Account◈ Create Transaction◈ continued... 29
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
DEMO◈ Subscription for any mutation of a Transaction◈ Client library usage
31
8.NEGATIVESWhat? I thought we should all switch to GraphQL?
32
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
9.REVIEWWhat did we learn?
34
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
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
OPEN DISCUSSION◈ Thoughts?◈ When should you use GraphQL on a project?◈ When should you NOT use GraphQL on a
project?
37
38
THANKS!Any questions?You can contact me via solutionstreet.com or LinkedInWe are always hiring!
Top Related