Query data like a pro - an introduction to GraphQL

An introduction talk about GraphQL given at the React Kiel Meetup Germany.

Transcript

1. QUERY DATA LIKE A PRO! AN INTRODUCTION TO GRAPHQL PRESENTED BY ERIC STUMPER 1 / 19
2. DISCLAIMER 2 / 19
3. ABOUT ME Developing Software at weluse GmbH for amazing 2.5 months Worked as a Frontend Developer and IT/Networking guy before Started out with React, Elixir/Phoenix and GraphQL in my Master's Thesis Besides coding I love travelling, hiking, indoor and beach volleyball Twitter: @ericstumper 3 / 19
4. CONTENTS REST in peace? GraphQL to the rescue Connecting React What about the server? The new shit! 4 / 19
5. REST IN PEACE? http://api.com/user/1 { "user": { "id": "1", "name": "Eric", "email": "eric@test.com", "friends": [ "/user/20/", "/user/30/" ] } } 5 / 19
6. GRAPHQL TO THE RESCUE query { user { id name email friends { name } } } 6 / 19
7. QUERY PARAMETERS QUERY VARIABLES query { user(id: 1) { name } } query User($userId: ID!) { user(id: $userId) { name } } { "userId": 1 } 7 / 19
8. DIRECTIVES query User($userId: ID!, $friends: Boolean!) { user(userID: $userId) { name email friends @include(if: $friends) { name } } } 8 / 19
9. MUTATIONS mutation CreateUser($name: String!) { createUser(name: $name) { id } } { "name": "Peter" } 9 / 19
10. FRAGMENTS { leftComparison: user(department: BILLING) { ...comparisonFields } rightComparison: user(department: IT) { ...comparisonFields } } fragment comparisonFields on Person { name friends { name } } 10 / 19
11. CONNECTING REACT 11 / 19
12. WHAT ABOUT THE SERVER? 12 / 19
13. A SCHEMA AND TYPES IN ABSINTHE (ELIXIR) 13 / 19
14. THE NEW SHIT! 14 / 19
15. @DEFER query User($userId: ID!) { user(userID: $userId) { name email friends @defer { name } } } 15 / 19
16. @STREAM query Users { users @stream { name email friends @defer { name } } } 16 / 19
17. @LIVE query Users { users { name email friends @live { name } } } 17 / 19
18. SUBSCRIPTIONS subscription Users { users { name email } } 18 / 19
19. LINKS GENERAL SERVER CLIENT http://graphql.org/learn/ https://learngraphql.com/ https://wehavefaces.net/graphql-shorthand-notation-cheatsheet- 17cd715861b6#.c3z77kes8 Node: https://github.com/graphql/express-graphql Node: http://dev.apollodata.com/tools/ Elixir: http://absinthe-graphql.org http://dev.apollodata.com/react/ https://facebook.github.io/relay/ https://github.com/kadirahq/lokka 19 / 19