LeanIX GraphQL Lessons Learned - CodeTalks 2017

GraphQLLessons LearnedBernd Schönbach, Patrick Surrey

LeanIX GmbH

Agenda

2

Introduction• Aboutus• AboutLeanIX• AboutGraphQL

WhyGraphQL?

GraphiQL

APIDesign

GraphQL ClientDesign

Apollo

Mutations

N+1SelectIssue

ExceptionHandling

About Us

3

PatrickSurrey BerndSchönbach

About LeanIX

4

5

• Shortertimetomarket• Real-timebigdatainsights• Efficientscalability• Exceptionaluserexperience• Consistentchannels• Integratedworkflows• …

More• APIs• Devices• Sensors

ITArchitecturesaremoreimportantthaneverbefore

LeanIXisthemostcomfortablesolution– asSaaS

6

AvailableIntegrations

7

Industrials&Manufacturing

Financial&Insurance Consumer

Energy&Materials Pharma

TravelLogistics

MediaTelecoms

INTERNATIONALEXPANSION

Well-knownbrandsofallindustriestrustinLeanIX

LeanIXisbasedonamodernMicroservices Stack

8

Pathfinder

Postgres

Elasticsearch

ArangoDB

PathfinderUISinglePageApp•Angular(2)•Typescript

BackendServices•GraphQL orRESTAPI•oAuth2/wJWT•SwaggerAPIDocs•Event-Bus(Webhooks)

Resources•Nosharingacrossservices•DeploymentwithDocker

Web-hooks MTM Export Image

s Survey Metric

Postgres

Kafka

Postgres

Shibbo

leth

PhantomJS

Postgres

Elasticsearch

Influ

xDB

“PlatformServices”

GraphQL

About GraphQL

9

10

“A query language for your API”http://graphql.org/

11

History

• 2012nativemobileclientforNewsFeed

• Early2015announcedpublicly(https://www.youtube.com/watch?v=9sc8Pyc51uU)

• Sep.2015officiallyopensourced

• Nov.2016:Manymoreusers

12

Basicidea

Server

WHATisavailable

Client

WHICHdataisneeded

1.Schema

2.Datarequirements

Java,Node,Ruby,PHP,Go,Scala,

.NET…

SimpleHTTP-Client

http://graphql.org/code/

Why GraphQL?

13

Why GraphQL?

14

Application {idnametypereleasealiasdescriptionLifecycles {...}Relations {SuccessorsPredecessorsBusiness CapabilitiesUser Groups[...]

}[...]

}


}[...]

}

Why GraphQL?

15


}[...]

}


}[...]

}

Why GraphQL?

16


}[...]

}


}[...]

}


}[...]

}


}[...]

}

Why GraphQL?

17


}[...]

}


}[...]

}

Why GraphQL?

18


}[...]

}

query {id name type releasealias description...on Application {lifecycles {}relToSuccessor {}relToPredecessor {}relToBusinessCapability {}relToUserGroups {}[...]

}}

Why GraphQL?

19


}[...]

}

query {id name type releasealias description

}

Why GraphQL?

20


}[...]

}


}[...]

}


}[...]

}

query {id name

}

query {id name alias

}

query {id name description

}

Why GraphQL?

21


}[...]

}

query {id name...on Application {lifecycles {}relToBusinessCapabilities {}relToUserGroups {}

}}

GRAPHIQL

GraphiQL –Interactive in-browserGraphQL IDE

23

Runqueries

Integrated ExploreAPI

Seeresult

GraphiQL

24

• Available here:https://github.com/graphql/graphiql

• Greatway to document and explore the API

• Very helpfull during devolpment,e.g.for quickly testing the API

à Get it up and running from day one!

APIDESIGN

Connections– InspiredbyRelayFramework

26

{"id": "factsheet-123”,"tags": [{ "id": "tag-1", "label": "Tag 1" },{ "id": "tag-2", "label": "Tag 2" }, { "id": "tag-3", "label": "Tag 3" }

]}

{idtags { id label }

}

FactSheet

Tag

Tag

Tag

Connections

27

{"id": "factsheet-123”,"tags": {

"edges": [{ "node": { "id": "tag-1", "label": "Tag 1" } },{ "node": { "id": "tag-2", "label": "Tag 2" } }, { "node": { "id": "tag-3", "label": "Tag 3" } }

]}

}

{idtags {

edges {node { id label }

}}

}

FactSheet

Tag

Tag

Tag

Connections- Advantages

28

{idtags {

totalCountpageInfo { startCursor endCursor hasNextPage }edges {

node { id label }}

}}

Connections- Advantages

29

{idtags {permissions { create read update delete }edges {node { id label }

}}

}

Connections– Lessonslearned

30

• MakestheAPImoregraphlike

• Usetheconnectionpatternrightfromthestart

• PreventsbreakingchangesinAPI

• UsethesamepatternthroughouttheAPI

• Clientscanhandleconnectionsinthesameway

APIDesign– No“deadends”

31

{idtagId

}

{idtag { id label }

}

APIDesign– Generallessonslearned

32

• APIdesignshouldbenottoousecasespecific

• YAGNI(„Youaren‘tgonna needit“)isusuallyagoodadvice,butshould

notbeappliedhere

• GraphQL isadvertisedas„...givesclientsthepowertoaskforexactly

whattheyneed“sodonotartificiallyrestricttheAPI

GRAPHQL CLIENTDESIGN

Doomed to fail ...

34

Lotsofparameters

Nobodydarestotouchthis

Evenmoregeneric

GraphQL client – Querybuilding

35

Noparameters

Simple!:-)

Helpertomakerequests

APOLLO

What about the ApolloClient?

37

• ApolloClientavailablehere:

https://github.com/apollographql/apollo-client

• “Afully-featured,productionreadycachingGraphQL clientforevery

serverorUIframework”

• DeepintegrationpossiblewithReact,Angular,iOS,Android,…

What about the ApolloClient?

38

So,what about it then?

39

• Didyouuseit?

• No,itwasnotavailablewhenwestarted…

• Wouldyouuseit?

• Perhaps- itofferssomeniceabstractions(queriescanberestarted

forinstance),butourownverysimplisticapproachworksverywell

atthemoment

Mutations

40

Mutations

41

Mutation createApplication(name: “Application A“, alias: „APP-A“) { namealias

}

GraphQL Suggests:

Mutations

42

Mutation createFactSheet(input: {name: “Application A“, type: Application

}, patches: $patches) { namealias

}

Query:

{ patches: [{op:“add“, path:“/alias“, value:“APP-A“}

]}

Variables:

N+1SelectIssue

43

What is the N+1SelectIssue?

44

Application application =appDAO.getApplication();

for(Successor successor:application.getSucessors()){System.out.println(“Successor:“+successor.getName());}

Application application =appDAO.getApplication();

for(Successor successor:application.getSucessors()){System.out.println(“Successor:“+successor.getName());}

SELECT*FROMapplication WHERE...SELECT*FROMapplication WHERE...

SELECT*FROMsuccessor WHEREid =successor.id;SELECT*FROMsuccessor WHEREid =successor.id;SELECT*FROMsuccessor WHEREid =successor.id;...

#Selects

1

N

+SELECT*FROMsuccessor WHEREid =successor.id;SELECT*FROMsuccessor WHEREid =successor.id;SELECT*FROMsuccessor WHEREid =successor.id;...

Why dowe have this issue with GraphQL?

45


}[...]

}


46

• JavaLibraryuses Datafetcher

• Is afunction to connect GraphQL to underlying DB

• Knows only his level


47


}[...]

}

idnametypereleasealiasdescriptionLifecyclesRelations

idnametypereleasealiasdescriptionLifecyclesRelations


48

• No context awareness

• No easyimplementation dueto „everything is agraph“

• Needsmanual implementation to fix.

How To Solve This

49

• Prediction Library(enable context awareness)

• Batching

• Caching

• Facebooks solution is called relay

Exception Handling

50

Exception Handling

51

• Exceptions of JavaGraphQL Libraryare useless

• “Anerror occurred“

• You need context information to show usefull exceptions

• We implemented our own handler for that

Conclusion

52

Conclusion

53

• Stop thinking inREST

• No dead ends

• GrahpiQL first

• GraphQL is notthe solution for erverything

Breaking News

54

Breaking News

55

Breaking News

56

https://medium.com/@dwalsh.sdlr/using-graphql-why-facebook-now-owns-you-3182751028c9

Breaking News

57

https://code.facebook.com/posts/121714468491809/relicensing-the-graphql-specification/

Thank You

Questions?

Slides are available at:

https://de.slideshare.net/leanIX_net

Sources

• http://williamdurand.fr/2014/02/14/please-do-not-patch-like-an-idiot/

• http://graphql.org/

• https://github.com/graphql/graphiql

• https://www.leanix.net/de

• https://www.apollodata.com

• https://github.com/graphql-java/graphql-java

• https://angular.io/

• https://facebook.github.io/relay/

Software

LeanIX GraphQL Lessons Learned - CodeTalks 2017