GraphQL: Not just for Facebook anymore

I did a short talk at our local Frontend Meetup in Aalborg. Slides are for anyone interested.

Transcript

1. GraphQL Not just for Facebook anymore
2. Hi! I'm Andri Computer Engineer from Iceland React user since 2016 GraphQL in production since 2018 Co-organiser at Aalborg Frontend Meetup @andrioid on Twitter
3. Solutions for libraries, education, museums and more. www.redia.dk
4. Goal of this talk Hopefully convince you of the benefits of using GraphQL What is GraphQL Problems we didn't knew we had GraphQL features How to get started
5. What is GraphQL? Made by Facebook for their "Graph API" Describes API layouts, types and data Language and protocol agnostic Not a graph. More like a tree.
6. Problems We didn't know we had
8. Multiple resources per view Apps Live updates Typed JavaScript
9. Who owns the API?
10. Backend decides Multiple API calls per view Frontend does data processing and object merging Messy frontend code Lodash is a symptom, not a cure
11. Frontend decides Backend views created on API endpoint (combined data) Backend needs to add every field Performance implications Code duplication Messy backend code
12. Developers lose Maybe not a big loss, but loss Different departments have different priorities Maybe different work-load between frontend/backend
13. GraphQL Features
14. Schema API, Types, Data
15. Works with your language Flow Go JavaScript TypeScript Reason More...
16. Keeps the frontend clean No need for const moo = animals && animals.mammals && animals.mammals.cow && animals.mammals.cow.says(); When you know exactly what the data looks like Focus on the presentation, not the data
17. It's fast! Parallel fetching, when possible Dataloaders reduce round-trips More productive frontend developers Client Caching
18. Documentation Discover an API with introspect queries Local and remote tools Descriptions and type definitions Deprecated? Just add @deprecated
19. You convinced me! How do I get started?
20. Frontend Apollo Client (React, Angular, Vue, Native iOS/Android) (I recommend it) Urql (React) From Formiddable Labs Relay modern From Facebook
21. Backend Languages JS/TypeScript Apollo Server Go gqlgen PHP graphql-php Ready to use (JAMstack) GraphCMS Prime Strapi And many more
22. GraphQL basics 1. The schema language 2. Queries 3. Mutations 4. Resolvers 5. Dataloaders
23. Schema type Meetupee { id: ID! name: String! friends: [Meetupee!]! } type Query { allMeetupees: [Meetupee!] } type Mutation { renameMeetupee(id: ID!, newName: String!) Meetupee! } schema { query: Query, mutation: Mutation }
24. Queries { query { allMeetupees { name friends { name } } } }
25. Mutations Changes to data are called mutations. Idiomatic to return the object changed. mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) { createReview(episode: $ep, review: $review) { stars commentary } }
26. Resolver Knows how to get data for a certain type. From database From external API From memory GraphQL doesn't care
27. Dataloaders Batching and caching. Optional. But look it up before production.
28. Learn more www.graphql.org
29. Do I have to replace my API now? No
30. Questions?
31. Thanks for your time! If you want to know more, come find me after the talk.