SYSTEM Cited by 1 source

DataLoader (GraphQL per-request batching)

What it is

DataLoader (github.com/graphql/dataloader) is a generic utility from the GraphQL working group that provides per-request batching and caching for data-access calls. It is the GraphQL community's canonical fix for the N+1 query problem inside a single request: many concurrently-awaited load(key) calls collapse into a single batch call to the underlying data source, and identical keys within the same request are deduplicated via an in-memory cache tied to the request's lifetime.

Zalando's Rendering Engine uses an implementation of DataLoader to batch and cache queries to the Fashion Store API during a single request, "preventing duplicate calls to backends during the same request" (Source: sources/2021-09-08-zalando-micro-frontends-from-fragments-to-renderers-part-2).

How it solves the problem

In a page assembled from many Renderers that each declare their own GraphQL queries, a naive implementation would issue one backend call per Renderer — and if two Renderers ask for the same Entity's data, two backend calls for the same row. DataLoader rolls up all the load(...) calls registered in a single event-loop tick into a single batch function invocation with the full list of keys, and memoises the resolved values by key for the rest of the request.

Concretely:

  Renderer A: loader.load(outfitId_1)  ─┐
  Renderer B: loader.load(outfitId_2)  ─┤→ one batch fetch([1,2,3])
  Renderer C: loader.load(outfitId_2)  ─┘  (note: id 2 dedup'd)
  Renderer D: loader.load(outfitId_3)  ─

The per-request scoping is important: the cache exists for the duration of one HTTP request and is discarded, so consumers don't see stale cross-request data.

Why it matters for the Rendering Engine

• Batching: A Renderer tree with N children typically produces N sets of queries. DataLoader ensures those that hit the same resolver arrive together as one network call.
• Deduplication: An Outfit appearing in a hero slot and the same Outfit shown in a side rail do not double-fetch the outfit row.
• Plays well with recursion: Because the Rendering Engine recursively resolves child entities, DataLoader's event-loop batching aligns naturally with the Engine's asynchronous fan-out.

Where it sits in the stack

  Renderer → withQueries GraphQL spec
      │
      ▼
  Rendering Engine GraphQL executor
      │
      ▼
  DataLoader (batch + per-request cache)   ← this page
      │
      ▼
  Perron HTTP client (circuit breaker, retries)
      │
      ▼
  Fashion Store API (GraphQL)

Related

• systems/graphql — DataLoader is a GraphQL-working-group project; it's the standard per-request-batching companion to a GraphQL executor.
• systems/zalando-rendering-engine — the wiki's canonical production user.
• systems/zalando-graphql-ubff — the downstream GraphQL service DataLoader batches against.
• systems/perron-zalando-data-client — the HTTP-level resilience layer DataLoader ultimately calls through.
• systems/nodejs — Node's event-loop tick is DataLoader's batching boundary.