SlideShare a Scribd company logo
1 of 38
Download to read offline
The GraphQL Ecosystem
in 2018
Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk
Agenda
1. The GraphQL Schema
2. Frontend
3. Backend
4. Tooling
5. DEMO
The GraphQL Schema
Core to every GraphQL API
@nikolasburk
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
Example: Hello World
Schema
@nikolasburk
Server ResponseQuery
Example: CRUD for User type
@nikolasburk
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
@nikolasburk
Structure vs Behaviour
STRUCTURE
BEHAVIOUR
Learn more 💡
https://blog.graph.cool/ac5e2950214e
GraphQL Server Basics - The Schema
@nikolasburk
Frontend
GraphQL clients enable declarative data fetching
@nikolasburk
Frontend (React)
• GraphQL clients provide declarative abstractions
for working with the API
• Most popular
1. Apollo Client
2. Relay
3. Urql
@nikolasburk
Learn more 💡
https://itnext.io/d1bc69de305f
Exploring GraphQL Clients For React Apps
@nikolasburk
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
3. Use response data in
props of component
1. Define data requirements
with GraphQL query
2. Pass query to GraphQL client
Backend
Building GraphQL servers
@nikolasburk
GraphQL Server Components
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
@nikolasburk
GraphQL Server Components
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)}GraphQL Server
Library
@nikolasburk
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
Learn more 💡
https://blog.graph.cool/6da86f346e68
How to build a GraphQL Server with `graphql-yoga`
@nikolasburk
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
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
GraphQL Server Components
@nikolasburk
• GraphQL Schema Definition + Resolver Functions
• GraphQL Execution Engine (graphql-js)
• Network Layer (e.g. Express, Hapi, Koa,…)
GraphQL Server Components
😱
@nikolasburk
@nikolasburk
GraphQL Backend Architecture
e.g. graphql-yoga
DATABASE CRUD APITAILORED API FOR CLIENTS
Learn more 💡
https://www.prismagraphql.com/docs
Prisma Documentation
@nikolasburk
Tooling
A plethora of GraphQL tools for amazing DX
@nikolasburk
• 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
}without bindings
with bindings
Learn more 💡
https://blog.graph.cool/80a4aa37cff5
Reusing & Composing GraphQL APIs w/ GraphQL Bindings
@nikolasburk
• 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
• 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
• 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
DEMO 🔨
https://github.com/graphql-boilerplates/react-fullstack-graphql/tree/master/basic
* Join the GraphQL Community *
+ GraphQL Berlin MeetupMarch 21
, GraphQL Day (Amsterdam)April 14
June 15 * GraphQL Europe (Berlin)
@nikolasburk
Thank you! 🙇
… any questions?
@nikolasburk
• 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

More Related Content

What's hot

Real Time Data Analytics with MongoDB and Fluentd at Wish
Real Time Data Analytics with MongoDB and Fluentd at WishReal Time Data Analytics with MongoDB and Fluentd at Wish
Real Time Data Analytics with MongoDB and Fluentd at Wish
MongoDB
 
S3 Intro
S3 IntroS3 Intro
S3 Intro
fool2nd
 

What's hot (20)

The API Journey: GraphQL Specification and Implementation
The API Journey: GraphQL Specification and ImplementationThe API Journey: GraphQL Specification and Implementation
The API Journey: GraphQL Specification and Implementation
 
Search Queries Explained – A Deep Dive into Query Rules, Query Variables and ...
Search Queries Explained – A Deep Dive into Query Rules, Query Variables and ...Search Queries Explained – A Deep Dive into Query Rules, Query Variables and ...
Search Queries Explained – A Deep Dive into Query Rules, Query Variables and ...
 
I/O intensiveなKafka ConsumerアプリケーションのスループットをLINE Ads Platformではどのように改善したか
I/O intensiveなKafka ConsumerアプリケーションのスループットをLINE Ads Platformではどのように改善したかI/O intensiveなKafka ConsumerアプリケーションのスループットをLINE Ads Platformではどのように改善したか
I/O intensiveなKafka ConsumerアプリケーションのスループットをLINE Ads Platformではどのように改善したか
 
サーバーサイドから見るGraphQL Serverless Meetup #19
サーバーサイドから見るGraphQL Serverless Meetup #19サーバーサイドから見るGraphQL Serverless Meetup #19
サーバーサイドから見るGraphQL Serverless Meetup #19
 
MongoDB at Baidu
MongoDB at BaiduMongoDB at Baidu
MongoDB at Baidu
 
A (XPages) developers guide to Cloudant
A (XPages) developers guide to CloudantA (XPages) developers guide to Cloudant
A (XPages) developers guide to Cloudant
 
Rootconf
RootconfRootconf
Rootconf
 
2016 SUTOL: React.js – High-Performance Client for Domino
2016 SUTOL: React.js – High-Performance Client for Domino2016 SUTOL: React.js – High-Performance Client for Domino
2016 SUTOL: React.js – High-Performance Client for Domino
 
Brandon obrien streaming_data
Brandon obrien streaming_dataBrandon obrien streaming_data
Brandon obrien streaming_data
 
Fluentd and Docker - running fluentd within a docker container
Fluentd and Docker - running fluentd within a docker containerFluentd and Docker - running fluentd within a docker container
Fluentd and Docker - running fluentd within a docker container
 
Enhanced site search with cognitive APIs - Glynn Bird
Enhanced site search with cognitive APIs - Glynn BirdEnhanced site search with cognitive APIs - Glynn Bird
Enhanced site search with cognitive APIs - Glynn Bird
 
Real Time Data Analytics with MongoDB and Fluentd at Wish
Real Time Data Analytics with MongoDB and Fluentd at WishReal Time Data Analytics with MongoDB and Fluentd at Wish
Real Time Data Analytics with MongoDB and Fluentd at Wish
 
Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...
Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...
Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...
 
Searchlight + Horizon - Mitaka march 2016
Searchlight  + Horizon - Mitaka march 2016Searchlight  + Horizon - Mitaka march 2016
Searchlight + Horizon - Mitaka march 2016
 
Grokking TechTalk #33: Architecture of AI-First Systems - Engineering for Big...
Grokking TechTalk #33: Architecture of AI-First Systems - Engineering for Big...Grokking TechTalk #33: Architecture of AI-First Systems - Engineering for Big...
Grokking TechTalk #33: Architecture of AI-First Systems - Engineering for Big...
 
Augmenting Mongo DB with treasure data
Augmenting Mongo DB with treasure dataAugmenting Mongo DB with treasure data
Augmenting Mongo DB with treasure data
 
DeNA West & BigQuery
DeNA West & BigQueryDeNA West & BigQuery
DeNA West & BigQuery
 
S3 Intro
S3 IntroS3 Intro
S3 Intro
 
Unifying Events and Logs into the Cloud
Unifying Events and Logs into the CloudUnifying Events and Logs into the Cloud
Unifying Events and Logs into the Cloud
 
Pig on Spark
Pig on SparkPig on Spark
Pig on Spark
 

Similar to The GraphQL Ecosystem in 2018

Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL Library
Neo4j
 

Similar to The GraphQL Ecosystem in 2018 (20)

Boost your APIs with GraphQL 1.0
Boost your APIs with GraphQL 1.0Boost your APIs with GraphQL 1.0
Boost your APIs with GraphQL 1.0
 
GraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database accessGraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database access
 
CONDG April 23 2020 - Baskar Rao - GraphQL
CONDG April 23 2020 - Baskar Rao - GraphQLCONDG April 23 2020 - Baskar Rao - GraphQL
CONDG April 23 2020 - Baskar Rao - GraphQL
 
Boost your API with GraphQL
Boost your API with GraphQLBoost your API with GraphQL
Boost your API with GraphQL
 
Camunda GraphQL Extension (09/2017 Berlin)
Camunda GraphQL Extension (09/2017 Berlin)Camunda GraphQL Extension (09/2017 Berlin)
Camunda GraphQL Extension (09/2017 Berlin)
 
GraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & ContentfulGraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & Contentful
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentation
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
 
GraphQL + relay
GraphQL + relayGraphQL + relay
GraphQL + relay
 
Introduction to Graph QL
Introduction to Graph QLIntroduction to Graph QL
Introduction to Graph QL
 
Training Week: GraphQL 2022
Training Week: GraphQL 2022Training Week: GraphQL 2022
Training Week: GraphQL 2022
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
How easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performanceHow easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performance
 
Mój przepis na skalowalną architekturę mikroserwisową? Apollo Federation i Gr...
Mój przepis na skalowalną architekturę mikroserwisową? Apollo Federation i Gr...Mój przepis na skalowalną architekturę mikroserwisową? Apollo Federation i Gr...
Mój przepis na skalowalną architekturę mikroserwisową? Apollo Federation i Gr...
 
Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL Library
 
Modern APIs with GraphQL
Modern APIs with GraphQLModern APIs with GraphQL
Modern APIs with GraphQL
 
Scaling your GraphQL applications with Dgraph
Scaling your GraphQL applications with DgraphScaling your GraphQL applications with Dgraph
Scaling your GraphQL applications with Dgraph
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018
 

More from Nikolas Burk

More from Nikolas Burk (14)

Next-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and PrismaNext-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and Prisma
 
Code-first GraphQL Server Development with Prisma
Code-first  GraphQL Server Development with PrismaCode-first  GraphQL Server Development with Prisma
Code-first GraphQL Server Development with Prisma
 
GraphQL & Prisma from Scratch
GraphQL & Prisma from ScratchGraphQL & Prisma from Scratch
GraphQL & Prisma from Scratch
 
Managing GraphQL servers with AWS Fargate & Prisma Cloud
Managing GraphQL servers  with AWS Fargate & Prisma CloudManaging GraphQL servers  with AWS Fargate & Prisma Cloud
Managing GraphQL servers with AWS Fargate & Prisma Cloud
 
Building Serverless GraphQL Backends
Building Serverless GraphQL BackendsBuilding Serverless GraphQL Backends
Building Serverless GraphQL Backends
 
GraphQL Subscriptions
GraphQL SubscriptionsGraphQL Subscriptions
GraphQL Subscriptions
 
The Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend ArchitectureThe Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend Architecture
 
State Management & Unidirectional Data Flow
State Management & Unidirectional Data FlowState Management & Unidirectional Data Flow
State Management & Unidirectional Data Flow
 
Diving into GraphQL, React & Apollo
Diving into GraphQL, React & ApolloDiving into GraphQL, React & Apollo
Diving into GraphQL, React & Apollo
 
Authentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQLAuthentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQL
 
Getting Started with Relay Modern
Getting Started with Relay ModernGetting Started with Relay Modern
Getting Started with Relay Modern
 
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
 
Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions
 
REST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOSREST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOS
 

Recently uploaded

Recently uploaded (20)

Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
 
BusinessGPT - Security and Governance for Generative AI
BusinessGPT  - Security and Governance for Generative AIBusinessGPT  - Security and Governance for Generative AI
BusinessGPT - Security and Governance for Generative AI
 
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
 
Encryption Recap: A Refresher on Key Concepts
Encryption Recap: A Refresher on Key ConceptsEncryption Recap: A Refresher on Key Concepts
Encryption Recap: A Refresher on Key Concepts
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
 
Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)
 
Effective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeConEffective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeCon
 
GraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4jGraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4j
 
From Knowledge Graphs via Lego Bricks to scientific conversations.pptx
From Knowledge Graphs via Lego Bricks to scientific conversations.pptxFrom Knowledge Graphs via Lego Bricks to scientific conversations.pptx
From Knowledge Graphs via Lego Bricks to scientific conversations.pptx
 
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
Auto Affiliate  AI Earns First Commission in 3 Hours..pdfAuto Affiliate  AI Earns First Commission in 3 Hours..pdf
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
 
Abortion Pill Prices Turfloop ](+27832195400*)[ 🏥 Women's Abortion Clinic in ...
Abortion Pill Prices Turfloop ](+27832195400*)[ 🏥 Women's Abortion Clinic in ...Abortion Pill Prices Turfloop ](+27832195400*)[ 🏥 Women's Abortion Clinic in ...
Abortion Pill Prices Turfloop ](+27832195400*)[ 🏥 Women's Abortion Clinic in ...
 
CERVED e Neo4j su una nuvola, migrazione ed evoluzione di un grafo mission cr...
CERVED e Neo4j su una nuvola, migrazione ed evoluzione di un grafo mission cr...CERVED e Neo4j su una nuvola, migrazione ed evoluzione di un grafo mission cr...
CERVED e Neo4j su una nuvola, migrazione ed evoluzione di un grafo mission cr...
 
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
 
From Theory to Practice: Utilizing SpiraPlan's REST API
From Theory to Practice: Utilizing SpiraPlan's REST APIFrom Theory to Practice: Utilizing SpiraPlan's REST API
From Theory to Practice: Utilizing SpiraPlan's REST API
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 
The Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test AutomationThe Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test Automation
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024
 

The GraphQL Ecosystem in 2018