$30 off During Our Annual Pro Sale. View Details »

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. What the hell is GraphQL and
    why should I care?
    Fatos Hoti
    @hotifatos

    View Slide

  2. Who am I?
    - Fatos Hoti
    - Pula, Croatia
    - Berlin, Germany
    - Frontend developer

    View Slide

  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

    View Slide

  4. Problem to solve
    REST API
    Client 1
    Client 2
    Client 3

    View Slide

  5. Problem to solve
    REST API
    Client 1
    Client 2
    Client 3
    AGGREGATION
    LAYER

    View Slide

  6. Solution
    REST API
    Client 1
    Client 2
    Client 3
    GRAPHQL
    SERVER

    View Slide

  7. JS

    View Slide

  8. GraphQL server
    var graphqlHTTP = require('express-graphql');
    var graphQLServer = express();
    graphQLServer.use(graphqlHTTP(req => ({
    context: {loaders}, graphiql: true, schema
    })));
    graphQLServer.listen(8888);

    View Slide

  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,});

    View Slide

  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)) },
    }

    View Slide

  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)
    }

    View Slide

  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)
    }
    });

    View Slide

  13. Caching
    import DataLoader from 'dataloader';
    export const carLoader = new DataLoader(
    ids => Promise.all(ids.map((id) => api(`v1/classifieds/ad/${id}/`)))
    );

    View Slide

  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()

    View Slide

  15. DEMO

    View Slide

  16. Future
    - subscriptions
    - batch
    - @defer
    - @stream
    - @live

    View Slide

  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

    View Slide

  18. Code examples
    https://github.com/wkda/code-demos/tree/master/graphql-talk-fatos-hoti-code-exa
    mples

    View Slide

  19. Dm trdmtm tmtm
    Questions
    @hotifatos

    View Slide