DevFest Vienna - GraphQL

Transcript

1. GRAPHQL DEVFEST VIENNA – 2016
2. github.com/alpacaaa MARCO SAMPELLEGRINI
3. A data query and data manipulation language for client apps
4. ALTERNATIVE TO REST
5. EXAMPLE: GITHUB REPO PAGE
6. REPO INFO
7. /repos/jonsuh/hamburgers 1. { 2. "id": 52645453, 3. "name": "hamburgers", 4. "full_name": "jonsuh/hamburgers", 5. "html_url": "https://github.com/jonsuh/hamburgers", 6. "description": "Tasty CSS­animated Hamburgers", 7. ... 8. } 9.
8. LAST COMMIT
9. /commits/master 1. [ 2. { 3. "sha": "c06b0d54ca327f8507fd1e032a0adf69c170f122", 4. "commit": { 5. "message": "Update readme with new preview.", 6. "date": "2016­03­07T15:12:22Z", 7. ... 8. }, 9. "author": { 10. "login": "jonsuh", 11. "id": 359871, 12. "avatar_url": "https://avatars.githubusercontent.com/u/359871?v=3",
10. TREE
11. /git/trees/master 1. { 2. "tree": [ 3. { 4. "path": ".gitignore", 5. "sha": "ea60652264db43aab511d4cec0882f55908dbc59", 6. }, 7. { 8. "path": "README.md", 9. "sha": "b1d830c56ac8232269ea751e3729ea104c476761", 10. }, 11. { 12. "path": "index.html", 13. "sha": "72f0f97bf2aa5655bc6ca61b0c62df01af7b478c", 14. },
12. CAN WE START CODING???
13. TREE ENTRY
14. /git/commits?path=.gitignore 1. [ 2. { 3. "sha": "2732635e20531fb0a63d1d40eca0c24105f1b3e0", 4. "commit": { 5. "message": "Flatten asset directory structure.", 6. "date": "2016­02­26T22:39:51Z", 7. ... 8. }, 9. "author": { 10. "login": "jonsuh", 11. "id": 359871, 12. "avatar_url": "https://avatars.githubusercontent.com/u/359871?v=3",
15. .gitignore README.md index.html ONE REQUEST PER ENTRY
16. PROBLEMS Many roundtrips to the server Lots of data we don't need GBOJ – Giant Blob of JSON
17. THAT WAS FUN!
18. MEET GRAPHQL
19. QUERY { repo(ownerUsername: "jonsuh" name: "hamburgers") { description } } RESULT { "data": { "repo": { "description": "Tasty CSS-animated Hamburgers" } } } HELLO WORLD IN GRAPHQL
20. LAST COMMIT { repo(ownerUsername: "jonsuh" name: "hamburgers") { description commits(limit: 1) { sha message date } } } { "repo": { "description": "Tasty CSS-animated Hamburgers", "commits": [ { "sha": "c06b0d54ca327f8507fd1e032a0adf69c170f122", "message": "Update readme with new preview.", "date": "2016-03-07T15:12:22Z" } ] } }
21. TREE { repo(ownerUsername: "jonsuh" name: "hamburgers") { description commits(limit: 1) { sha message date tree { entries { path } } } } } { "repo": { "description": "Tasty CSS-animated Hamburgers", "commits": [ { "sha": "c06b0d54ca327f8507fd1e032a0adf69c170f122", ... "tree": { "entries": [ { "path": ".gitignore" }, { "path": "README.md" }, { "path": "index.html" } ... ] } } ] } }
22. TREE ENTRY { repo(ownerUsername: "jonsuh" name: "hamburgers") { description commits(limit: 1) { sha message date tree { entries { path last_commit { sha message date } } } } } } { "repo": { "description": "Tasty CSS-animated Hamburgers", "commits": [ { "sha": "c06b0d54ca327f8507fd1e032a0adf69c170f122", ... "tree": { "entries": [ { "path": ".gitignore", "last_commit": { "message": "Flatten asset directory structure.", "date": "2016-02-26T22:39:51Z", } }, { "path": "README.md" "last_commit": { ... } } ... ] } } ] } }
23. TREE ENTRY { repo(ownerUsername: "jonsuh" name: "hamburgers") { description commits(limit: 1) { sha message date tree { entries { path last_commit { sha message date } } } } } } <Repo> <RepoInfo /> <LastCommit /> <RepoTree> <TreeEntry> <FileLastCommit /> </TreeEntry> <TreeEntry> <FileLastCommit /> </TreeEntry> <TreeEntry> <FileLastCommit /> </TreeEntry> ... </RepoTree> </Repo>
24. What you request is what you get WYRIWYG
25. Client is responsible for the data returned DECLARATIVE
26. TYPE SYSTEM
27. Single root schema Root schema made up of elds Fields must have a speci c type Developers can de ne their own types GRAPHQL SCHEMA
28. IMPLEMENT A GRAPHQL SERVER in Node.js
29. OFFICIAL MODULES graphql-js express-graphql
30. TYPES WE NEED 2. type GithubUser { 3. id : Int 4. login : String 5. company : String 6. avatar_url : String 7. repos : [GithubRepo] 8. } 1. 9. 10. 11. type GithubRepo { 12. id : Int 13. name : String 14. owner : GithubUser 15. issues : [GithubIssue] 16. commits : [GithubCommit] 17. } 18. 19.
31. TYPE DEFINITION 2. import { 3. GraphQLObjectType, 4. GraphQLString, 5. GraphQLNonNull, 6. GraphQLInt, 7. GraphQLFloat, 8. GraphQLBoolean, 9. GraphQLList, 10. } from 'graphql'; 11. 12. 13. const UserType = new GraphQLObjectType({ 14. name: 'GithubUser', 15. fields: () => ({ 1.
32. ROOT SCHEMA 2. const schema = new GraphQLSchema({ 3. query: new GraphQLObjectType({ 4. name: 'RootQueryType', 5. fields: { 6. repo: { 7. type: RepoType, 8. args: { 9. name: { 10. description: 'Name of the repo', 11. type: new GraphQLNonNull(GraphQLString), 12. }, 13. ownerUsername: { 14. description: 'Username of the owner', 15. type: new GraphQLNonNull(GraphQLString), 1.
33. TOOLING: GRAPHIQL An IDE for building GraphQL queries
35. THANKS!