data-client-v0.18-migration
@data-client v0.18 Migration
Applies to anyone implementing a custom Schema — SchemaSimple, SchemaClass, polymorphic wrappers, or types that subclass EntityMixin directly. Built-in schemas (Entity, resource(), Collection, Union, Values, Array, Object, Query, Invalidate, Lazy) are migrated by the library.
What changed
Schema.denormalize and Schema.normalize now take a single delegate instead of (args, unvisit) / (args, visit, delegate):
denormalize(input, delegate) { return delegate.unvisit(this.schema, input); }
normalize(input, parent, key, delegate /*, parentEntity? */) {
return delegate.visit(this.schema, input, parent, key);
}
Critical semantic change: reading delegate.args does not contribute to cache invalidation. Schemas whose output varies with endpoint args must register that dependency through delegate.argsKey(fn). See Step 2 below.
Step 1: run the codemod
Pre-check — skip the rest of this skill if it doesn't apply. Most apps that only consume @data-client (use Entity, resource(), Collection, Query, etc.) need zero code changes for v0.18. Run the search below at your repo root — rg respects .gitignore so it won't dive into node_modules. If it returns nothing, you're done; bump the package versions and move on.
# preferred (ripgrep)
rg -n 'extends (Schema|SchemaSimple|SchemaClass|EntityMixin)\b|^\s*_?(de)?normalize\s*[(=:]|\bunvisit\b|\bvisit\(' .
# fallback (POSIX grep) — adjust the path list to your source roots
grep -rEn --include='*.ts' --include='*.tsx' --include='*.js' --include='*.jsx' \
'extends (Schema|SchemaSimple|SchemaClass|EntityMixin)\b|^[[:space:]]*_?(de)?normalize[[:space:]]*[(=:]|\bunvisit\b|\bvisit\(' \
src app lib packages 2>/dev/null
The pre-check intentionally ignores Entity overrides of pk, process, and merge — those signatures didn't change in v0.18. Only the denormalize / normalize delegate signature did.
Otherwise, commit first so you can diff, then run the codemod against your source roots — src/ is the conventional location, but App Router (app/), Vue (src/), monorepo packages (packages/), and library (lib/) layouts all need the path adjusted:
npx jscodeshift -t https://dataclient.io/codemods/v0.18.js --extensions=ts,tsx,js,jsx <source-root>
Do not point jscodeshift at the repo root — it doesn't respect .gitignore and will walk into node_modules.
A clean run looks like 0 errors, N unmodified, 0 skipped — that's expected, not a failure. The codemod rewrites parameter lists, body references (unvisit(…), visit(…), bare args), pass-through calls, TS method/property signatures, and adds IDenormalizeDelegate / INormalizeDelegate imports. After it runs, only the cases below need hand work.
Single-file components (Vue/Svelte/Astro/MDX): the codemod uses jscodeshift's tsx parser, which can't parse SFCs — adding .vue (etc.) to --extensions produces parse errors, not transforms. If your schemas live inside SFC <script> blocks, either extract them to plain .ts first (preferred — schemas are usually shared across components anyway) or migrate those files by hand using the rewrite shape from Step 3.
Step 2: register argsKey for args-dependent schemas (not automatable)
If your schema's return value depends on endpoint args, the codemod will rewrite args → delegate.args, but that read alone no longer participates in memoization. Register the dependency explicitly so the cache invalidates correctly.
argsKey(fn) returns fn(args) and uses the function reference itself as the cache path key. fn must be referentially stable — bind it on the instance or at module scope. An inline arrow creates a new reference per call and misses the cache every time.
class LensSchema {
constructor({ lens }) {
this.lensSelector = lens;
}
denormalize(input, delegate) {
const lens = delegate.argsKey(this.lensSelector);
return this.lookup(input, lens);
}
}
See Scalar for a real-world example.
Step 3: hand-migrate cases the codemod skips
The codemod no-ops on these — find them and update by hand. The shape of the change is always the same: (input, args, unvisit) → (input, delegate) and (input, parent, key, args, visit, delegate[, parentEntity]) → (input, parent, key, delegate[, parentEntity]), with unvisit/visit becoming delegate.unvisit/delegate.visit and bare args becoming delegate.args.
- Files with no
@data-client/*import — the codemod gates on this. Either add an import or migrate the file by hand. - Class fields —
denormalize = (input, args, unvisit) => { ... }. Rewrite to a method (denormalize(input, delegate) { ... }) so future codemods catch it too. const denormalize = function.../const normalize = function...— onlyfunctiondeclarations and methods are matched.- Computed or dynamic method keys —
[name]: function(...),obj.denormalize = function(...). Identifier and string-literal keys are matched; nothing else is. - Interface methods named
_denormalize/_denormalizeNullableasTSMethodSignature— only the literal keydenormalizeis matched in that form. The same names are handled when written asdeclarefields or property signatures with a function type. Either rename todenormalizeon the interface or edit the parameter list manually. - Custom helper functions that wrap
(args, unvisit)and are passed around — update the helper signature and every caller.
Step 4: verify
- Run the type-checker. Residual errors about
unvisit,visit,args, or delegate parameter counts point at code Step 3 missed. - Run your test suite. Cache-invalidation regressions usually surface as stale denormalized values when args change — that signals a missing
argsKeyfrom Step 2. - Grep for leftover patterns the codemod can't see:
denormalize(followed by three params, ornormalize(withargs, visit, delegate- bare
unvisit(/visit(calls inside denormalize/normalize bodies - spread
...argsinside denormalize/normalize bodies
Optional: Collection consolidation
Unrelated to delegate signatures: v0.18 lets a single Collection carry both argsKey and nestKey, so the same instance can back a top-level endpoint schema and a nested entity field. See Optional: consolidate Collection definitions in the v0.18 blog.
Reference
- New interfaces:
IDenormalizeDelegate,INormalizeDelegate - Built-in schema diffs:
packages/endpoint/src/schemas/{Array,Object,Values,Union,Query,Invalidate,Lazy,Collection}.ts - Changesets:
.changeset/denormalize-delegate.md,.changeset/normalize-delegate.md - Codemod source:
website/static/codemods/v0.18.js
More from reactive/data-client
data-client-schema
Model data with @data-client schemas (Entity, EntityMixin, Collection, Union, Query, Values, All, Invalidate, Lazy, Scalar) for atomic, consistent, referentially-equal async data via normalization, identity-based caching, and a single source of truth. Use when defining or editing pk, static schema, resource()/RestEndpoint schema, mutable lists/maps (push/unshift/assign/remove/move), polymorphic/discriminated types, memoized selectors / derived data, partial/supplementary entities, relational/nested/joined data, optimistic updates, or cache invalidation across @data-client/rest, /endpoint, /graphql, or /normalizr. Apply proactively when discussing data models, remote data shape, caching, normalization, identity, joins, polymorphism, mutable collections, or store consistency.
34data-client-rest
Define REST APIs with @data-client/rest - resource(), RestEndpoint, CRUD (GET/POST/PUT/PATCH/DELETE), HTTP fetch, normalize, cache, urlPrefix, path-to-regexp parameters, searchParams, pagination, extend(), auth/headers, optimistic updates, polling, file download, blob, parseResponse. Use when defining or modifying network endpoints, REST resources, or the HTTP layer.
33data-client-rest-setup
Set up and migrate to @data-client/rest for REST APIs. Detects existing HTTP patterns (axios, fetch, ky, superagent, got) and migrates them. Creates custom RestEndpoint base class with common behaviors. Use when adopting @data-client/rest in a new or existing project.
33data-client-manager
Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, middleware, intercepting Controller actions, DataProvider managers prop, redux-style action handling. Use when adding cross-cutting store behavior, reacting to dispatched actions, or handling external event streams.
32data-client-setup
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
31data-client-react-testing
Test @data-client/react with renderDataHook and mountDataClient - jest unit tests, fixtures, interceptors, MockResolver, mock responses, nock HTTP mocking, fake timers for polling/subscription tests, DataProvider test setup, hook and component testing. Use when writing or debugging tests for hooks, components, or resources built on @data-client/react.
30