Thinking in GraphQL

This is my first talk that happened in 7masters.
I made an overview in 7 minutes on what it is and why use GraphQL.
--
http://setemasters.imasters.com.br/

Transcript

1. GraphQL http://graphql.org/ Thinking in
2. @igorapa
3. https://www.loggi.com
4. rgr = roger
5. What is GraphQL? GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012.
6. https://cldup.com/ysnmIMhqRU.png
7. https://github.com/graphql/swapi-graphql
8. https://github.com/graphql/swapi-graphql
9. Why GraphQL? - Maintainability - Single-round trip - No over-fetching (no more no less) -
10. { user(id: 30) { name, foo: friend(id: 2) { name } bar: friend(id: 13) { name, email } } } Aliases
11. { "data": { "user": { "name": "Igor APA", "foo": { "name": "Foo" }, "bar": { "name": "Bar", "email": "bar@bar.com" } } } } Aliases
12. import { GraphQLID, GraphQLInt, GraphQLList, GraphQLSchema, GraphQLString, GraphQLNonNull, GraphQLObjectType, } from 'graphql'; Schema.js
13. let Schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'Query', fields: () => ({ store: { type: storeType, resolve: () => store } }) }), mutation: new GraphQLObjectType({ name: 'Mutation', fields: () => ({ createData: createDataMutation }) }) }); export default Schema; Schema.js
14. server.js app.use('/graphql', GraphQLHTTP({ schema, graphiql: true }));
15. Schema.js import {post} from 'jquery'; import ServerActions from './actions/ServerActions'; let API = { fetchDatas() { post('/graphql', { query: `{ value { _id, title, url } }` }).done(resp => { ServerActions.receiveDatas(resp.data.value); }); } }; export default API;
16. . !"" data # %"" schema.js !"" js # !"" API.js # !"" AppDispatcher.js # !"" Constants.js # !"" actions # # %"" ServerActions.js # !"" app.js # !"" components # # !"" Item.js # # %"" Main.js # %"" store # %"" DataStore.js !"" package.json !"" public !"" server.js %"" webpack.config.js Tree
17. @igorapa Thank you!