GraphQL introduction

Introduction to GraphQL presented in FED's forum at eXelate

Transcript

1. GraphQL introduction to
2. User Football Fantasy App Team Player
3. Football Fantasy App oferitz rank: 12 total points: 86 100 April MayJuneJuly Team 1 Team 2 Team 3 Team 4 Player 1 Team 5 rank points rank points rank points rank points rank points Player 2 Player 3 Player 4 Player 5 Player 6 Player 7 Player 8 Player 9 Player 10 Player 12 Player 13
4. <User user={user} /> <div> <img src={user.avatar} /> <span>{user.name} </span> <UserStats stats={user.stats} /> {user.teams.map( team => <Team team={team} /> )} {user.teams.players.map( player => <Player player={player} /> )} </div> Render our user screen
5. REST API Fetch data - RESTful API
6. REST API Fetch data - RESTful API GET /users/1
7. REST API Fetch data - RESTful API GET /users/1/teams GET /users/1
8. REST API Fetch data - RESTful API GET /users/1/teams GET /users/1 GET /users/1/teams/players
9. REST API or Fetch data - RESTful API GET /users/1/teams GET /users/1 GET /users/1/teams/players
10. REST API or Fetch data - RESTful API GET /users/1/teams GET /users/1 GET /users/1?include=teams,players GET /users/1/teams/players
11. Problems
12. Problems • 3 API calls for 1 component
13. Problems • 3 API calls for 1 component • Overfetching of data
14. Problems • 3 API calls for 1 component • Overfetching of data • How does the data structure looks like?
15. Problems • 3 API calls for 1 component • Overfetching of data • How does the data structure looks like? • API versioning
16. Problems • 3 API calls for 1 component • Overfetching of data • How does the data structure looks like? • API versioning • Ad Hoc endpoints
17. GraphQL
18. • Client-specified queries - allows clients to request just what they need • Strongly-typed schema - describe all the data • Introspective - allows clients to see what data is available (auto documentation, code generation, static validation, IDE integration) A DECLARATIVE QUERY LANGUAGE FOR API’S created by Facebook in 2012 OS in 2015
19. { user (id: 1) { avatar username } } POST /graph
20. { user (id: 1) { avatar username } } { "data": { "user": { "avatar": “https: //cdn.com/u/1.jpg“, "username": "oferitz" } } } POST /graph
21. type Query { user: User team: Team player: Player } type User { id: ID! name: String email: String username: String points: Int avatar: String teams: [Team] } type Team { id: ID! name: String crest: String formation: String value: Int budget: Int players: [Player] user: User } type Player { id: ID! name: String position: Positions club: String price: Int image: Int matches: Int goals: Int assists: Int yellowCards: Int redCards: Int goalsConceded: Int }
22. Server response steps { user (id: 1) { avatar name teams { name players { name } } } }
23. Server response steps Parse String —> AST { user (id: 1) { avatar name teams { name players { name } } } }
24. Server response steps Parse String —> AST Validate validate against schema { user (id: 1) { avatar name teams { name players { name } } } }
25. Server response steps Parse String —> AST Validate validate against schema Execute resolvers { user (id: 1) { avatar name teams { name players { name } } } }
26. Query User Team Player user (id: 1) { id, name, avatar, teams } avatar name teams { id, name, players }, name name player player { id, name } { id, name } name name { id, name, players }
27. Query User Team Player user (id: 1) { id, name, avatar, teams } avatar name teams { id, name, players }, name name player player { id, name } { id, name } name name { id, name, players }
28. Query User Team Player user (id: 1) { id, name, avatar, teams } avatar name teams { id, name, players }, name name player player { id, name } { id, name } name name { id, name, players } resolvers Execution starts at the top. Resolve functions at the same level are executed concurrently.
29. Mutations mutation { team: createTeam(team: {name: "FC NMC", user: 2}) name } }
30. Fragments { messi: player(name: “messi”) { …playerFields } ronaldo: player(name: “ronaldo”) { …playerFields } } fragment playerFields on Player { name goals assits }
31. Variables query dynamic_team($tid: ID!) { team(teamId: $tid) { name formation } } { "tid": 1 }
32. But wait, there's more! Directives @include(if: Boolean) Only include this field in the result if the argument is true. @skip(if: Boolean) Skip this field if the argument is true. query dynamic_team($tid: ID!) { team(teamId: $tid) { name players @include(if: $withPlayers) { name } } } { "tid": 1 "withPlayers": true } Unions union Searchable = User | Team | Player type Query { search(text: String!): [Searchable]! } query { search(text: "ro") { ... on User { name } ... on Team { name } ... on Player { name } } } Interfaces interface Searchable { searchText: String! } type User implements Searchable { searchText: String! … } type Team implements Searchable { searchText: String! … } type Player implements Searchable { searchText: String! … } type Query { search(text: String!): [Searchable]! }
33. But wait, there's more! Directives @include(if: Boolean) Only include this field in the result if the argument is true. @skip(if: Boolean) Skip this field if the argument is true. query dynamic_team($tid: ID!) { team(teamId: $tid) { name players @include(if: $withPlayers) { name } } } { "tid": 1 "withPlayers": true } Unions union Searchable = User | Team | Player type Query { search(text: String!): [Searchable]! } query { search(text: "ro") { ... on User { name } ... on Team { name } ... on Player { name } } } Interfaces interface Searchable { searchText: String! } type User implements Searchable { searchText: String! … } type Team implements Searchable { searchText: String! … } type Player implements Searchable { searchText: String! … } type Query { search(text: String!): [Searchable]! }
34. But wait, there's more! Directives @include(if: Boolean) Only include this field in the result if the argument is true. @skip(if: Boolean) Skip this field if the argument is true. query dynamic_team($tid: ID!) { team(teamId: $tid) { name players @include(if: $withPlayers) { name } } } { "tid": 1 "withPlayers": true } Unions union Searchable = User | Team | Player type Query { search(text: String!): [Searchable]! } query { search(text: "ro") { ... on User { name } ... on Team { name } ... on Player { name } } } Interfaces interface Searchable { searchText: String! } type User implements Searchable { searchText: String! … } type Team implements Searchable { searchText: String! … } type Player implements Searchable { searchText: String! … } type Query { search(text: String!): [Searchable]! }
35. http://www.apollodata.com https://facebook.github.io/relay
36. Graphiql
37. N+1 Problem User Teams Players r.table('Player') .get(playerId) for each player in each team
38. Dataloader batching & caching getPlayersUsingTeamId() teamIds Promise.resolve([players]) single query to fetch players for a list of team IDs const PlayerByTeamIdLoader = new DataLoader(getPlayersUsingTeamId) PlayerByTeamIdLoader(1)
39. Future Live Subscriptions Stream & Defer { user (id: 1) { avatar name teams @stream { name players @defer { name } } } } subscription teams { createTeam { name user } } { all_players { avatar name points @live } }
40. Future Live Subscriptions Stream & Defer { user (id: 1) { avatar name teams @stream { name players @defer { name } } } } subscription teams { createTeam { name user } } { all_players { avatar name points @live } }
41. Future Live Subscriptions Stream & Defer { user (id: 1) { avatar name teams @stream { name players @defer { name } } } } subscription teams { createTeam { name user } } { all_players { avatar name points @live } }
42. THANKS @tonofweb Ofer Itzhaki https://github.com/oferitz/football-fantasy-graphql