Client-Server Communication with GraphQL Web Engineering , Guest - - PowerPoint PPT Presentation

▶
client server communication with graphql
SMART_READER_LITE
LIVE PREVIEW

Client-Server Communication with GraphQL Web Engineering , Guest - - PowerPoint PPT Presentation

Sep 27, 2023 312 likes •586 views

Client-Server Communication with GraphQL Web Engineering , Guest lecture, 188.951 2VU SS20 Erik Wittern | erikwittern@gmail.com | @erikwittern | wittern.net May 18 th 2020 Learning goals What actually is GraphQL, and how came it about?

slide-1
SLIDE 1

Client-Server Communication with GraphQL

Web Engineering, Guest lecture, 188.951 2VU SS20 Erik Wittern | erikwittern@gmail.com | @erikwittern | wittern.net May 18th 2020

slide-2
SLIDE 2

Learning goals

  • What actually is GraphQL, and how came it about?
  • How does GraphQL work?
  • What are some benefits vs. challenges for GraphQL?

Mai 18th 2020 2

slide-3
SLIDE 3

Background & Overview

Mai 18th 2020 3

slide-4
SLIDE 4

In 2012, Facebook faced a problem

Mai 18th 2020 4 Source: https://reactjs.org/blog/2015/05/01/graphql-introduction.html

An increasing number of ever- evolving (mobile, native) clients… …led to the creation of (and hence maintenance burden for) more and more, increasingly complex (ad hoc) API endpoints.

slide-5
SLIDE 5

GraphQL shifts control over what data is returned (or mutated) to clients

type User { name: String age: Int } type Query { me: User }

Providers define their data types at design time

query { me { name } }

Clients send queries at runtime

{ "data" : { "me" : { "name" : "Erik" } } }

Servers respond with data at runtime

Mai 18th 2020 5

slide-6
SLIDE 6

Demo

https://www.github.com/ErikWittern/graphql-demo

Mai 18th 2020 6

slide-7
SLIDE 7

So, what is GraphQL?

  • A query language for networked APIs…
  • …and a runtime for servers to fulfill queries

Response: {"data": …}

POST {"introspection": …} {"schema": …}

Server DB API

  • Clients send type-checked queries, servers respond with requested data:

GraphQL client (here: GraphiQL)

  • Specification + reference implementation in JavaScript

Request: POST {"query": …} Mai 18th 2020 7

slide-8
SLIDE 8

History of GraphQL

  • 2012 – Originally developed and used by Facebook
  • …to serve increasing numbers of diverse clients
  • Sep 2015 – Open sourcing
  • Sep 2016 – Move from “technical preview” to “working draft”
  • Nov 2018 – Announcement of GraphQL Foundation (part of The Linux

Foundation)

Mai 18th 2020 8

slide-9
SLIDE 9

Language & Runtime

Mai 18th 2020 9

slide-10
SLIDE 10

Anatomy of a GraphQL query (selected concepts)

Mai 18th 2020 10

query fetchGraphQLData ($details: Boolean!) { repository(owner: "graphql", name: "graphql-js") { ...repoDetails @include(if: $details) issueOrPullRequest(number: 10) { ...on Issue { updatedAt } } } } fragment repoDetails on Repository { repoName: name description }

Fragment definition Operation type Operation name Variable definition Field selection 2 Arguments Fragment spread Directive Inline fragment Selection set Type condition

More details at: http://spec.graphql.org/draft/#sec-Document-Syntax

Alias

slide-11
SLIDE 11

Defining schemas with the schema definition language (SDL)

Mai 18th 2020 11

schema { query: Query } type Query { users(limit: Int!): [User] } directive @upperCase on FIELD_DEFINITION enum Status { ACTIVE INACTIVE } type User { name: String @upperCase """Description of field User.status""" status: Status }

Schema definition Root operation type definition Object type definition Argument definition Field definition Directive definition Directive locations Directive Type Name

More details at: http://spec.graphql.org/draft/#sec-Document-Syntax

Enum type definition Name

slide-12
SLIDE 12

Query exeuction on a (HTTP) server

Mai 18th 2020 12

HTTP server GraphQL middleware GraphQL execution engine Extract request parameters

{"errors": … } {"query": … } {"data": … , "errors": … }

Evaluate selection sets Resolver functions

(contained in schema object)

DB API Parse query string Validate

(against schema)

Coerce variable values Build response

slide-13
SLIDE 13

Advanced Query Concepts

Mai 18th 2020 13

slide-14
SLIDE 14

Introspection

  • Introspection is a mechanism for clients to learn (at

runtime) about the data types and operations a GraphQL server offers

  • An introspection query is a plain-old GraphQL

query…

  • …that happens to select meta-fields provided by

introspection types

Mai 18th 2020 14

query IntrospectionQuery { __schema { queryType { name } mutationType { name } subscriptionType { name } types { ...FullType } directives { name locations args { ...InputValue } } } } ... Directive Definitions ...

  • Client-tools like GraphiQL rely on introspection for:
  • Showing documentation about types & operations
  • Client-side query validation
  • Auto-completion when typing queries
  • Etc.
slide-15
SLIDE 15

Demo

https://developer.github.com/v4/explorer/

Mai 18th 2020 15

slide-16
SLIDE 16

Pagination with slicing arguments and offset

  • Pagination aims to return different parts

(or slices) of long lists of data

  • Slicing arguments (often named max,

limit , first, or last) define length of slice to return

  • Often combined with an “offset”

Mai 18th 2020 16

query fetchPage2 { user { name friends(last: 5, offset: 5) { name } } }

17 16 15 14 13 12 11 10 9 8 7 6

  • ffset

slice

5 4 3 2 1

page 1 page 2 …

17 16 15 14 13 12 11 10 9 8 7 6

  • ffset

slice

5 4 20 19 18

page 1 page 2 new returned twice

  • One problem: this approach may return

items twice when list updates

15 14 13

slide-17
SLIDE 17

Pagination with Cursor Connections

  • Cursor Connections rely on…
  • Fields using slicing arguments…
  • …return a Connection with fields

pageInfo and edges…

  • …where each Edge has fields cursor

and node, containing the actual object.

Mai 18th 2020 17 More details about cursor connections at: https://relay.dev/graphql/connections.htm (also source of the example above)

query fetchPage2 { user { name friends(last: 5, after: "opaqueCursor") { pageInfo { hasNextPage } edges { cursor node { name } } } } }

…

17 16 15 14 13 12 11 10 9 8 7 6

cursor slice

5 4 20 19 18

page 1 page 2 new

  • Robust to list-updates outside the slice

during paginating

  • Think of a common Facebook’s use-case:

news feed, where mostly items are added

slide-18
SLIDE 18

Pros & Cons

Mai 18th 2020 18

slide-19
SLIDE 19

GraphQL benefits for clients

In-sync documentation

  • f type system

Predictable responses No over- fetching Fewer roundtrips Static typing (auto- complete, validation) Mai 18th 2020 19

slide-20
SLIDE 20

GraphQL benefits for providers

  • Happy API consumers (!)
  • Simplified maintenance
  • Serve clients with diverse, changing

requirements with a single endpoint

  • GraphQL API self-documents types & operations
  • Improved performance and operations
  • Avoid loading / caching / exposing unneeded

data

  • Understand data-use on a per-field level
  • Compose heterogenous backend resources

Mai 18th 2020 20

Server

DB API

slide-21
SLIDE 21

Challenge: HTTP caching of GraphQL requests

  • Problems with typical HTTP proxy /

gateway caches include:

  • Often, non-safe & non-idempotent POST is

used to send (large) queries

  • Some queried fields may become stale

sooner than others, making it hard to define Cache-Control / Last- modified headers

Mai 18th 2020 21 More details at: https://www.apollographql.com/blog/graphql-caching-the-elephant-in-the-room-11a3df0c23ad

Client-side cache Proxy cache

Server

DB API

Gateway cache Application cache

consumer network provider

  • Alternatives include:
  • Cache persisted queries in proxy or gateway
  • Client-side caching based on ID field
  • Application caches in the data-layer

(“DataLoaders”) or resolver functions

slide-22
SLIDE 22

Challenge: rate-limiting & threat prevention

  • Servers may need to deal with

excessive queries sent by clients

  • Rate-limiting - and not “x requests per

time-interval”

  • Pricing requests
  • Blocking (inadvertently) threatening

requests

Mai 18th 2020 22

query fetchAllTheData { users (limit: 1000) {

  • rders (first: 1000) {

paymentDetails { # calls external API status } } } }

= ~1000s of REST requests!

  • Options include:
  • Timeouts against threatening requests
  • Dynamic analysis
  • Static analysis
  • Query “depth” or “nesting”
  • Query “cost” or “complexity”

More details at: https://www.ibm.com/blogs/research/2019/02/graphql-api-management/

slide-23
SLIDE 23

Wrap-up

Mai 18th 2020 23

slide-24
SLIDE 24

Summary

  • Remember: GraphQL was created to address specific problems with other

API models

  • Using GraphQL may or may not be beneficial
  • Who are API clients? Internal, external, both?
  • How is an API used?
  • How will the API (likely) evolve?
  • à consider the trade-offs (as with most technology choices)
  • There is much more to learn about GraphQL !!
  • Mutation and subscription operations
  • (Automatic) mappings to REST APIs or databases
  • Schema stitching and federation
  • And more!

Mai 18th 2020 24

slide-25
SLIDE 25

Additional resources

  • Web resources
  • Official GraphQL website, incl. documentation (https://graphql.org/)
  • GraphQL specification (http://spec.graphql.org/)
  • Principled GraphQL (https://principledgraphql.com/)
  • Libraries
  • GraphQL-js reference implementation (https://github.com/graphql/graphql-js)
  • OpenAPI-to-GraphQL (https://github.com/IBM/openapi-to-graphql)
  • Apollo Client (https://www.apollographql.com/client/)
  • …and many many more!!!
  • Videos
  • “GraphQL – The Documentary” (https://www.youtube.com/watch?v=783ccP__No8)
  • “Zero to GraphQL in 30 Minutes” by Steven Luscher (https://www.youtube.com/watch?v=UBGzsb2UkeY)
  • Research papers & books
  • “Semantics and Complexity of GraphQL” by Hartig and Perez (http://olafhartig.de/files/HartigPerez_WWW2018_Preprint.pdf)
  • “An Empirical Study of GraphQL Schemas” by Wittern et al.

(http://people.cs.vt.edu/davisjam/downloads/publications/WitternChaDavisBaudartMandel-EmpiricalGraphQL-ICSOC19.pdf, summary at https://medium.com/swlh/empirical-study-graphql-icsoc19-29038c48da5)

  • ”Production ready GraphQL” by Marc-Andre Giroux (from GitHub, @__xuorig__) (https://book.productionreadygraphql.com/)

Mai 18th 2020 25

slide-26
SLIDE 26

Thank you!

Mai 18th 2020 26