# GraphQL Taiwan Meetup 001
---
# About me
Daniel Tseng (kpman)
- NTU
- [Yoctol](https://www.yoctol.com/)
- [GitHub](https://github.com/kpman)
---
# [Dataloader](https://github.com/facebook/dataloader)
---
---
---
## Starting from GraphQL
---
---
## GraphQL
- Schema
- Resolve functions
---
## GraphQL resolve functions
- Get the data
- From difference source backend
---
## Difference source
```javascript
getAuthor(_, args) {
return sql.raw('SELECT * FROM authors WHERE id = %s', args.id);
}
posts(author) {
return request(`https://api.blog.io/by_author/${author.id}`);
}
```
---
## Execution
- Top down
- Resolve from root of the query
- Wait until all resolve function (include Promise)
- Proceed in a cascading fashion down the tree
---
## [Example](https://cdn-images-1.medium.com/max/1600/1*ldZjwY1qE1LTdm8VqNqltQ.png)
---
## Example
```javascript
{
getAuthor(id: 2) {
name
posts {
title
author {
name # this will be the same as the name above
}
}
}
}
```
---
## Example
---
## Demo
- query times
- network time
---
## Problem?
- repeat fetching
- DB loading increase
---
## Before
---
## After
---
# [Dataloader](https://github.com/facebook/dataloader)
DataLoader is a generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via **batching** and **caching**.
---
## Batch Function
- (keys) => Promise.resolve(values)
- The Array of values must be the same length as the Array of keys.
- Each index in the Array of values must correspond to the same index in the Array of keys
---
## Cache
- Only serves the purpose of not repeatedly loading the same data in the context of a single request to your Application.
---
## API
- [new DataLoader(batchLoadFn [, options])](https://github.com/facebook/dataloader#new-dataloaderbatchloadfn--options)
- [load(key)](https://github.com/facebook/dataloader#loadkey)
- [clear(key)](https://github.com/facebook/dataloader#clearkey)
- [Readme](https://github.com/facebook/dataloader#api)
---
## Sample code
```javascript
const DataLoader = require('dataloader');
const authorLoader = new DataLoader(ids =>
knex('authors')
.whereIn('id', ids)
.select()
.then(rows => ids.map(id => rows.find(x => x.id === id))));
const p1 = authorLoader.load(1); // return promise
const p2 = authorLoader.load(2); // return promise
const [author1, author2] = await Promise.all([p1, p2]);
```
---
## More usages
- [caches repeated requests](https://github.com/facebook/dataloader/blob/master/src/__tests__/dataloader-test.js#L81-L130)
- [batch multiple requests with max batch sizes](https://github.com/facebook/dataloader/blob/master/src/__tests__/dataloader-test.js#L65-L79)
---
## Common Pattern
- Creating a new DataLoader per request.
- ex: create a DataLoader in server middleware
---
## Reference
- [How GraphQL turns a query into a response](https://dev-blog.apollodata.com/graphql-explained-5844742f195e)
- [Facebook Dataloader](https://github.com/facebook/dataloader)
- [Meetup example](https://github.com/kpman/graphqltw-meetup01)
---
## Thanks
{"metaMigratedAt":"2023-06-14T14:07:42.407Z","metaMigratedFrom":"Content","title":"GraphQL Taiwan Meetup 001","breaks":true,"contributors":"[]"}