GraphQL has grown out of its baby shoes and is becoming the new standard for client-server communication. When it was introduced 2 years ago, there merely was any tooling that would help developers using it except for Facebook's reference implementation in JavaScript as well as corresponding middleware for Express so you could embed it in your web server. By now, the situation has changed drastically and a plethora of tools, libraries and services have entered the GraphQL ecosystem, providing great improvements to workflows and overall developer experience. In this talk, Nikolas will give an overview of the most relevant tools that exist in the GraphQL ecosystem today, ensuring you can make the best choices when starting your own GraphQL journey.

1. The GraphQL Ecosystem
in 2018

2. Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

3. Agenda
1. The GraphQL Schema
2. Frontend
3. Backend
4. Tooling
5. DEMO

4. The GraphQL Schema
Core to every GraphQL API
@nikolasburk

5. The GraphQL Schema
• Strongly typed & written in GraphQL Schema Definition
Language (SDL)
• Defines API capabilities ( = contract for client-server
communication)
• Special root types: Query, Mutation, Subscription
@nikolasburk

6. Example: Hello World
Schema
@nikolasburk
Server ResponseQuery

7. Example: CRUD for User type
@nikolasburk

8. Structure vs Behaviour
• The GraphQL schema is an abstract description of the
structure of a GraphQL API
• Resolver functions are the concrete implementation
and determine the behaviour of a GraphQL API
@nikolasburk

9. @nikolasburk
Structure vs Behaviour
STRUCTURE
BEHAVIOUR

10. Learn more 💡
https://blog.graph.cool/ac5e2950214e
GraphQL Server Basics - The Schema
@nikolasburk

11. Frontend
GraphQL clients enable declarative data fetching
@nikolasburk

12. Frontend (React)
• GraphQL clients provide declarative abstractions
for working with the API
• Most popular
1. Apollo Client
2. Relay
3. Urql
@nikolasburk

13. Learn more 💡
https://itnext.io/d1bc69de305f
Exploring GraphQL Clients For React Apps
@nikolasburk

14. Declarative Data Fetching
1. Define data requirements with GraphQL query
2. Pass query to GraphQL client
3. Use response data in props of component 🎉
@nikolasburk

15. 3. Use response data in
props of component
1. Define data requirements
with GraphQL query
2. Pass query to GraphQL client

16. Backend
Building GraphQL servers
@nikolasburk

17. GraphQL Server Components
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
@nikolasburk

18. GraphQL Server Components
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)}GraphQL Server
Library
@nikolasburk

19. GraphQL Server Libraries
• express-graphql: Bare minimum GraphQL server for
Express
• apollo-server: Works with multiple web frameworks
but requires lots of boilerplate
• graphql-yoga: Simple setup, lots of tooling support
e.g. for realtime subscriptions, GraphQL Playground …
@nikolasburk

21. Learn more 💡
https://blog.graph.cool/6da86f346e68
How to build a GraphQL Server with `graphql-yoga`
@nikolasburk

22. Prisma - A GraphQL database layer
• Turns your database into a GraphQL API
• Provides a GraphQL API for CRUD operations
• Simplifies implementation of GraphQL resolvers
@nikolasburk

23. • GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
GraphQL Server Components
@nikolasburk

24. • GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
GraphQL Server Components
😱
@nikolasburk

25. @nikolasburk

26. GraphQL Backend Architecture
e.g. graphql-yoga
DATABASE CRUD APITAILORED API FOR CLIENTS

27. Learn more 💡
https://www.prismagraphql.com/docs
Prisma Documentation
@nikolasburk

28. Tooling
A plethora of GraphQL tools for amazing DX
@nikolasburk

29. • Enable reusing & sharing GraphQL APIs as modular
building blocks
• Invoke dedicated functions in your programming
language instead of manually sending queries & mutations
• Powerful concept for composing GraphQL APIs
GraphQL Bindings 🔗
https://github.com/graphcool/graphql-binding

30. }without bindings
with bindings

31. Learn more 💡
https://blog.graph.cool/80a4aa37cff5
Reusing & Composing GraphQL APIs w/ GraphQL Bindings
@nikolasburk

32. • Powerful GraphQL IDE to send queries and mutations
• Auto-generated & interactive API documentation
• More features: Subscriptions, Query Performance
Tracing, Multiple Tabs, Sharing Playgrounds,…
GraphQL Playground 🎮
https://github.com/graphcool/graphql-playground

33. • Generic command line tool for GraphQL projects
• Supports configuration standard graphql-config
• Plugin architecture allow to build custom
extensions
GraphQL CLI 📟
https://github.com/graphql-cli/graphql-cli

34. • Flexible starter kits for backend-only & fullstack
GraphQL projects
• Bootstrap with GraphQL CLI → graphql create
• Various features: Authentication, realtime,
database, …
GraphQL Boilerplates 🚀
https://github.com/graphql-boilerplates

35. DEMO 🔨
https://github.com/graphql-boilerplates/react-fullstack-graphql/tree/master/basic

36. * Join the GraphQL Community *
+ GraphQL Berlin MeetupMarch 21
, GraphQL Day (Amsterdam)April 14
June 15 * GraphQL Europe (Berlin)
@nikolasburk

37. Thank you! 🙇
… any questions?
@nikolasburk

38. • Allows to easily mock a GraphQL API with fake data
• Based on faker.js
• Various types of fake data: addresses, first/last
names, urls, dates, currencies, phone numbers …
https://github.com/APIs-guru/graphql-faker