Universal JS day - GraphQL

Transcript

1. GRAPHQL UNIVERSAL JS DAY – 2016
2. github.com/alpacaaa MARCO SAMPELLEGRINI
3. Small team – 5 people 100% Javascript codebase React Native – React – Node.js – RethinkDB Currently working on a classi ed project
4. A data query and data manipulation language for client apps
5. ALTERNATIVE TO REST
6. EXAMPLE: GITHUB REPO PAGE
7. Start by breaking down the UI into a component hierarchy THINKING IN REACT
8. THINKING IN REACT 1. <Repo> 2. <RepoInfo /> 3. <LastCommit /> 4. 5. <RepoTree> 6. <TreeEntry> 7. <FileLastCommit /> 8. </TreeEntry> 9. 10. <TreeEntry> 11. <FileLastCommit /> 12. </TreeEntry> 13. 14. <TreeEntry> 15. <FileLastCommit />
10. REPO INFO
11. /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.
12. LAST COMMIT
13. /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", 13. ... 14. },
14. TREE
15. /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. }, 15. {
16. CAN WE START CODING???
17. TREE ENTRY
18. /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. }, 12. ... 13. } 14. ] 15.
19. .gitignore README.md index.html ONE REQUEST PER ENTRY
20. PROBLEMS Many roundtrips to the server Lots of data we don't need GBOJ – Giant Blob of JSON
21. THAT WAS FUN!
22. MEET GRAPHQL
23. QUERY { repo(ownerUsername: "jonsuh" name: "hamburgers") { description } } RESULT { "data": { "repo": { "description": "Tasty CSS-animated Hamburgers" } } } HELLO WORLD IN GRAPHQL
24. 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" } ] } }
25. 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" } ... ] } } ] } }
26. 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": { ... } } ... ] } } ] } }
27. 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>
28. What you request is what you get WYRIWYG
29. Client is responsible for the data returned DECLARATIVE
30. TYPE SYSTEM
31. 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
32. IMPLEMENT A GRAPHQL SERVER in Node.js
33. OFFICIAL MODULES graphql-js express-graphql
34. TYPES WE NEED 2. GithubUser : Object { 3. id : Int 4. login : String 5. company : String 6. avatar_url : String 7. repos : [GithubRepo] 8. } 1. 9. 10. 11. GithubRepo : Object { 12. id : Int 13. name : String 14. owner : GithubUser 15. issues : [GithubIssue] 16. commits : [GithubCommit] 17. } 18. 19. 20. GithubCommit : Object {
35. 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: () => ({ 16. login: { 1.
36. 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), 16. } 1.
37. TOOLING: GRAPHIQL An IDE for building GraphQL queries
39. THANKS!