Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The GraphQL Ecosystem in 2018

1,570 views

Published on

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.

Published in: Software
  • Be the first to comment

The GraphQL Ecosystem in 2018

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

×