What the hell is GraphQL and why should I care

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