Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What the hell is GraphQL and why should I care

tosFa
October 07, 2016

What the hell is GraphQL and why should I care

tosFa

October 07, 2016
Tweet

More Decks by tosFa

Other Decks in Programming

Transcript

  1. Who am I? - Fatos Hoti - Pula, Croatia -

    Berlin, Germany - Frontend developer
  2. 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
  3. JS

  4. GraphQL server var graphqlHTTP = require('express-graphql'); var graphQLServer = express();

    graphQLServer.use(graphqlHTTP(req => ({ context: {loaders}, graphiql: true, schema }))); graphQLServer.listen(8888);
  5. GraphQL schema import { GraphQLSchema } from 'graphql'; import MutationType

    from '../types/MutationType'; import QueryType from '../types/QueryType'; export default new GraphQLSchema({ query: QueryType, mutation: MutationType,});
  6. 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)) }, }
  7. 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) }
  8. 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) } });
  9. Caching import DataLoader from 'dataloader'; export const carLoader = new

    DataLoader( ids => Promise.all(ids.map((id) => api(`v1/classifieds/ad/${id}/`))) );
  10. 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()
  11. 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