What the hell is GraphQL and why should I care

1. What the hell is GraphQL and why should I care? Fatos Hoti @hotifatos
2. Who am I? - Fatos Hoti - Pula, Croatia - Berlin, Germany - Frontend developer
3. What the hell is GraphQL? - Not a query language for graph dbs!!! - Not a DB!!! - Not a library - Protocol/spec for communication between clients and data sources for servers to execute - Layer between your datasource and your client - Strongly typed - A way to describe and query/mutate your data, client side - Gives you the power on client side to decide how much/what data you need - Fetch multiple resources in one round trip/request
4. Problem to solve REST API Client 1 Client 2 Client 3
5. Problem to solve REST API Client 1 Client 2 Client 3 AGGREGATION LAYER
6. Solution REST API Client 1 Client 2 Client 3 GRAPHQL SERVER
7. JS
8. GraphQL server var graphqlHTTP = require('express-graphql'); var graphQLServer = express(); graphQLServer.use(graphqlHTTP(req => ({ context: {loaders}, graphiql: true, schema }))); graphQLServer.listen(8888);
9. GraphQL schema import { GraphQLSchema } from 'graphql'; import MutationType from '../types/MutationType'; import QueryType from '../types/QueryType'; export default new GraphQLSchema({ query: QueryType, mutation: MutationType,});
10. GraphQL query export default new GraphQLObjectType({ name: 'query', description: "Query Type", fields: { cars: { type: new GraphQLList(CarType), resolve: () => loaders.carsLoader.load(`v1/search-template/classified/findAds/v2`) }, makes: { type: new GraphQLList(DropdownType), resolve: () => api(url, options).then(response => normalizeResponse(response)) }, }
11. GraphQL mutations createBooking: { type: BookingType, args: { hash: {type: new GraphQLNonNull(GraphQLString)}, branchId: {type: new GraphQLNonNull(GraphQLInt)}, ... }, resolve:(source, args) => api(url, options).then(response => response) }
12. GraphQL object export default new GraphQLObjectType({ name: 'car', description: 'car', fields: { id: {type: GraphQLString, description: "Id"}, manufacturer: { type: GraphQLString, description: "Manufacturer", resolve: car => `${car.vehicle.manufacturer}`}, equipments: { type: new GraphQLList(EquipmentType), description: "Equipments", resolve: car => loaders.equipmentAttributeLoader.load(car.equipments) } });
13. Caching import DataLoader from 'dataloader'; export const carLoader = new DataLoader( ids => Promise.all(ids.map((id) => api(`v1/classifieds/ad/${id}/`))) );
14. DataLoader - https://github.com/facebook/dataloader/ - new DataLoader(batchLoadFn [, options]) - batch - maxBatchSize - cache - cacheKeyFn - cacheMap - DataLoader.load(key) - DataLoader.loadMany(keys) - DataLoader.clear(keys) - DataLoader.clearAll()
15. DEMO
16. Future - subscriptions - batch - @defer - @stream - @live
17. Useful links - http://www.apollostack.com/ - https://facebook.github.io/relay/ - https://github.com/kadirahq/lokka - https://learngraphql.com - http://graphql.org/ - https://www.graphqlweekly.com/ - http://graphql-swapi.parseapp.com/ - https://www.youtube.com/watch?v=UBGzsb2UkeY - https://www.youtube.com/watch?v=WQLzZf34FJ8 - https://www.youtube.com/watch?v=ViXL0YQnioU - https://www.youtube.com/watch?v=etax3aEe2dA
18. Code examples https://github.com/wkda/code-demos/tree/master/graphql-talk-fatos-hoti-code-exa mples
19. Dm trdmtm tmtm Questions @hotifatos