Use Batch loader
Or loading resources on the fly.
The GraphQL PoC
Allowed us to notice that:
- resolvers were just using API endpoints handlers to load batchs of resources,
- going further would require a new rights management layer.
The GraphQL advantages evolved with
- HTTP2/3 (multiplexing, headers compression...),
- JWT tokens,
- wide Open API support (frameworks, SDKs...).
The GraphQL downsides due to our stack
- breaks our neat split using AWS Lambda,
- adds extra work to declare new schemas when OpenAPI ones exists.
Statement
What if we could use React hooks and contexts to tackle the N+1 problem?
Implementation
Let's dive into the code!
Components
- a context (providing
getById),
- a hook (providing LRU cache and a batch load manager),
- a provider (providing batch loader for actual resources).
Optimistic
Let's load the whole data directly!
Realistic
Load the lacking resources per batch.
How it works
- Just ask resources per ids,
- React rendering cumulate lacking ids,
- the hook eventually loads lacking resources per batches,
- next rendering finally display the loaded resources.
Interesting usages
- universal search,
- resource picker (show all or fallback to autocomplete),
- factory/organisation switchs,
- hacky root batch loader (filtered).
Share Your Thoughts!
Tell us what you think before we release the open source package.