All You Ever Wanted To Know About GraphQL - JAMstack Meetup Presentation

Founders of TakeShape, Andrew Sprouse and Mark Catalano, discuss GraphQL and how they use it to build TakeShape (https://www.takeshape.io/).

Transcript

1. GraphQL All you ever wanted to know ANDREW SPROUSE Co-founder and CTO, TakeShape
2. What We’re Going To Cover • What is GraphQL • Anatomy of a GraphQL environment • Demo • Why does GraphQL make sense for JAMStack? • Questions
3. What is GraphQL?
4. Schema Definition + Query language + Resolution framework
5. Schema • Provides a strongly typed description of your data • Schema Description Language (SDL) is the recommended cross-platform way to specify schema.
6. Schema GraphQL Schema also specifies how you interact with your data with queries and mutations
7. Queries Query your data and fetch exactly what you need
8. Mutations Mutate your data
9. Resolution Framework • Each GraphQL implementation provides it own query resolution framework • GraphQL.js is the reference implementation
10. Resolvers • Perform query and mutation resolution • GraphQL.js is the reference implementation Resolvers Schema (SDL)
11. Resolvers Also able to resolve dynamically computed fields Schema (SDL) Resolvers
12. Demo
13. Why does GraphQL make sense for JAMStack?
14. 1. Clarity WYQIWYG!
15. 2. Flexibility • Write the GraphQL Schema once use everywhere • Stop writing/querying many custom REST endpoints for each application customizing queries can be done on the frontend.
16. Aside: Comparison to REST GraphQL REST
17. Case in point
18. 3. Community And Tooling
19. Questions https://github.com/takeshape/jamstack-meetup-graphql-demo
20. Mark Catalano Co-founder, TakeShape GraphQL + CMS = Peanut Butter + Jelly
21. Headless GraphQL CMS
22. Headless GraphQL CMS
23. Headless GraphQL CMS
24. Headless GraphQL CMS
25. + Static Content Generator
26. Headless GraphQL CMS + SCG = CMS For The JAMstack
28. 2. Create 3. Develop 1. Model 4. Use
29. TakeShape
31. - Cons • GraphQL was relatively new and not yet widely adopted. • Facebook Patent Restrictions • Everyone knows REST • Wrestling REST endpoints to mash up custom data. • REST APIs are opaque and can be hard to learn + Pros
33. query { homepage { title image { path } } <html> <head> <title>{{ homepage.title }}</title> </head> <body> <h1>{{ homepage.title }}</h1> <img src="{{ homepage.image.path | image }}"/> </body> </html> GraphQL Template
34. TakeShape Collaborative Web UI GraphQL API Static Content Generator Hosting Via Third-parties Like Netlify CLI Tool
36. Using TakeShape’s GraphQL API GraphQL Query files + TakeShape SSG TakeShape’s GraphQL API Third Parties That Like to Party with GraphQL
37. Demo JAMstack Job Board
38. Join Us On The TakeShape Slack
39. Questions?
40. TakeShape Mesh Beta