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!