• Parallel data loading with useFetch() - Fetch multiple endpoints concurrently with use(useFetch()), avoiding sequential waterfalls
• Collection.move - Move entities between Collections with a single operation
• Collection.moveWith() - Customize move behavior (e.g., prepend instead of append)
• Lazy - Deferred relationship denormalization for performance and memoization isolation

Other Improvements:

• Direct schema imports - Import schema classes directly without the schema namespace
• Denormalization depth limit - Prevent stack overflow in large bidirectional entity graphs; configurable via Entity.maxEntityDepth (#3822)
• DevToolsManager exposes globalThis.__DC_CONTROLLERS__ in dev mode for programmatic store access from Chrome DevTools MCP and Expo MCP. Use the data-client-react skill to enable AI-assisted debugging.
• Remove misleading 'Uncaught Suspense' warning during Next.js SSR
• Fix sideEffect: false type being lost with method: 'POST' in RestEndpoint
• renderDataHook() automatic cleanup after each test — no manual cleanup() calls needed
• renderDataHook() returns per-render cleanup() and allSettled() for reliable test teardown

Collection.move makes it easy to move entities between Collections with a single operation:

import { useController } from '@data-client/react';
import { TaskResource, type Task } from './TaskResource';

export default function TaskCard({ task }: { task: Task }) {
  const handleMove = () => ctrl.fetch(
    TaskResource.getList.move,
    { id: task.id },
    { id: task.id, status: task.status === 'backlog' ? 'in-progress' : 'backlog' },
  );
  const ctrl = useController();
  return (
    <div className="listItem">
      <span style={{ flex: 1 }}>{task.title}</span>
      <button onClick={handleMove}>
        {task.status === 'backlog' ? '\u25bc' : '\u25b2'}
      </button>
    </div>
  );
}

Breaking Changes:

• path-to-regexp v8 - RestEndpoint.path syntax updated: /:optional? → {/:optional}, /:repeat+ → /*repeat (typed as string[])
• useFetch() returns UsablePromise - Returns a thenable for React.use(); check .resolved instead of truthiness

Upgrade with an automated codemod for all breaking changes:

npx jscodeshift -t https://dataclient.io/codemods/v0.16.js --extensions=ts,tsx,js,jsx src/

Collection.move​

Collection.move and RestEndpoint.move make it easy to move entities between collections with a single PATCH request. The entity is automatically removed from collections matching its old state and added to collections matching the new values from the request body.

This is useful for kanban boards, group reassignment, status changes, or any workflow where an item moves between filtered lists.

const TaskResource = resource({
  path: '/tasks/:id',
  searchParams: {} as { status: string },
  schema: Task,
});

// PATCH /tasks/3 - moves task from 'backlog' to 'in-progress'
await ctrl.fetch(
  TaskResource.getList.move,
  { id: '3' },
  { id: '3', status: 'in-progress' },
);

Works for both path parameters and search parameters, and supports Array and Values collections.

Collection.moveWith()​

Collection.moveWith() constructs a custom move schema, analogous to addWith(). The merge function controls how entities are added to their destination collection (e.g., prepending instead of appending), while the remove behavior is automatically derived. The unshift merge function is provided for convenience.

import { Collection, unshift } from '@data-client/rest';

class MyCollection extends Collection {
  constructor(schema, options) {
    super(schema, options);
    this.move = this.moveWith(unshift);
  }
}

Parallel data loading​

useFetch() now returns a UsablePromise thenable, making use(useFetch(endpoint, args)) a drop-in equivalent to useSuspense() — it suspends when data is loading, returns denormalized data when cached, throws on errors, and re-suspends on invalidation.

Because useFetch() and use() are separate calls, multiple fetches start in parallel. All useFetch() calls execute before any use() suspends, so every fetch is already in-flight even if the first use() suspends the component. This avoids the sequential waterfall that occurs with multiple useSuspense() calls, where the second fetch cannot begin until the first resolves. #3755

import { use } from 'react';
import { useFetch } from '@data-client/react';
import { PostResource, CommentResource } from './Resources';

function PostWithComments({ id }: { id: number }) {
  // Both fetches start in parallel
  const postPromise = useFetch(PostResource.get, { id });
  const commentsPromise = useFetch(CommentResource.getList, { postId: id });

  // use() reads the results — if the first suspends,
  // the second fetch is already in-flight
  const post = use(postPromise);
  const comments = use(commentsPromise);

  return (
    <article>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
      <h4>Comments</h4>
      {comments.map(comment => (
        <div key={comment.id} className="listItem">
          <strong>{comment.author}</strong>: {comment.text}
        </div>
      ))}
    </article>
  );
}
render(<PostWithComments id={1} />);

Denormalization depth limit & Lazy​

When schemas have bidirectional relationships across entity types (e.g., Department → Building → Department → ...), denormalization traverses every unique entity in the connected graph. With small datasets this is invisible, but at scale — thousands of interconnected entities — the recursion exceeds the JS call stack and throws RangeError: Maximum call stack size exceeded. #3822

Two complementary features address this: a depth limit as a safety net, and Lazy for precise, per-field control over which relationships are resolved eagerly.

Denormalization depth limit​

Denormalization now enforces a default depth limit of 64 entity hops. Entities beyond the limit are returned with unresolved ids instead of fully denormalized objects. A console.error is emitted in development mode when the limit is reached.

The limit can be configured per-Entity with static maxEntityDepth:

class Department extends Entity {
  static maxEntityDepth = 16;
}

This prevents crashes, but is a blunt instrument — it cuts off all deep paths, including legitimate non-cyclic ones. For fine-grained control, use Lazy.

Lazy​

Lazy wraps a schema to skip eager denormalization of specific relationship fields. During parent entity denormalization, the field retains its raw normalized value (primary keys). The relationship can then be resolved on demand via useQuery using the .query accessor.

import { Entity, Lazy } from '@data-client/rest';

class Department extends Entity {
  id = '';
  name = '';
  buildings: string[] = [];

  static schema = {
    buildings: new Lazy([Building]),
  };
}

Unlike the depth limit, Lazy is a targeted opt-in per relationship. Only the fields you mark as lazy skip eager resolution — the rest of the schema denormalizes normally. This also improves performance by deferring work for relationships that aren't always needed, and provides memoization isolation — changes to lazy entities don't invalidate the parent's denormalized form.

See Lazy documentation for full usage details and #3828 for design discussion.

Migration guide​

This upgrade requires updating all package versions simultaneously.

yarn add @data-client/react@^0.16.0 @data-client/rest@^0.16.0 @data-client/endpoint@^0.16.0 @data-client/core@^0.16.0 @data-client/vue@^0.16.0 @data-client/test@^0.16.0 @data-client/img@^0.16.0

npm install --save @data-client/react@^0.16.0 @data-client/rest@^0.16.0 @data-client/endpoint@^0.16.0 @data-client/core@^0.16.0 @data-client/vue@^0.16.0 @data-client/test@^0.16.0 @data-client/img@^0.16.0

pnpm add @data-client/react@^0.16.0 @data-client/rest@^0.16.0 @data-client/endpoint@^0.16.0 @data-client/core@^0.16.0 @data-client/vue@^0.16.0 @data-client/test@^0.16.0 @data-client/img@^0.16.0

<script type="module">
  import * from 'https://esm.sh/@data-client/react@^0.16.0';
  import * from 'https://esm.sh/@data-client/rest@^0.16.0';
  import * from 'https://esm.sh/@data-client/endpoint@^0.16.0';
  import * from 'https://esm.sh/@data-client/core@^0.16.0';
  import * from 'https://esm.sh/@data-client/vue@^0.16.0';
  import * from 'https://esm.sh/@data-client/test@^0.16.0';
  import * from 'https://esm.sh/@data-client/img@^0.16.0';
</script>

An automated codemod handles all three breaking changes below — path syntax, useFetch() truthiness, and schema namespace imports:

npx jscodeshift -t https://dataclient.io/codemods/v0.16.js --extensions=ts,tsx,js,jsx src/

path-to-regexp v8​

RestEndpoint.path now uses path-to-regexp v8, which changes the syntax for optional parameters, repeating parameters, and special characters.

Optional parameters​

The ? suffix is removed. Wrap the optional segment (including its prefix) in {}.

const ep = new RestEndpoint({
  path: '/:group/things/:number?',
});

const ep = new RestEndpoint({
  path: '/:group/things{/:number}',
});

Multiple optional segments with different prefixes:

const ep = new RestEndpoint({
  path: '/:attr1?{-:attr2}?{-:attr3}?',
});

const ep = new RestEndpoint({
  path: '{/:attr1}{-:attr2}{-:attr3}',
});

Repeating parameters​

+ (one-or-more) and * (zero-or-more) suffixes are removed. Use *name wildcard syntax, wrapped in {} for zero-or-more.

Wildcard parameters are now typed as string[] (arrays) instead of string | number, since they represent multiple path segments.

const ep = new RestEndpoint({
  path: '/files/:path+',
});
ep({ path: 'docs/reports/q4' });
const optEp = new RestEndpoint({
  path: '/files/:path*',
});

const ep = new RestEndpoint({
  path: '/files/*path',
});
ep({ path: ['docs', 'reports', 'q4'] });
const optEp = new RestEndpoint({
  path: '/files{/*path}',
});

Quoted parameter names​

Parameter names with special characters (dashes, dots) must now be quoted with double quotes:

const ep = new RestEndpoint({
  path: '/:with-dash',
});

const ep = new RestEndpoint({
  path: '/:"with-dash"',
});

Custom regex removed​

Inline regex patterns like /:id(\d+) are no longer supported. Remove the regex — validate on the server instead.

const ep = new RestEndpoint({
  path: '/users/:id(\\d+)',
});

const ep = new RestEndpoint({
  path: '/users/:id',
});

Escaping special characters​

Characters {}()*: and \\ must be escaped with \\ when used as literals. However, ? and + are no longer special in v8, so existing escapes for those can be removed:

const ep = new RestEndpoint({
  path: '/search\\?q=:q',
});

const ep = new RestEndpoint({
  path: '/search?{q=:q}{&page=:page}',
});

Finding paths to migrate​

Search your codebase for these patterns in path: values:

• ? after a :param — optional parameters to convert
• + or * after a :param — repeating parameters to convert
• (\ after a :param — custom regex to remove
• Parameter names with - or . — need quoting

See RestEndpoint.path for full v8 syntax documentation, or path-to-regexp errors for detailed explanations. AI-assisted migration is also available:

npx skills add reactive/data-client --skill path-to-regexp-v8-migration

npx openskills install reactive/data-client --skill path-to-regexp-v8-migration

Browse all skills on skills.sh

useFetch() returns UsablePromise​

useFetch() now returns a UsablePromise thenable with denormalized data, error handling, and a .resolved property. This makes it directly compatible with React.use() — use(useFetch(endpoint, args)) behaves identically to useSuspense().

Previously useFetch() returned undefined when data was valid. Code that checked for a fetch via truthiness must now use .resolved:

const promise = useFetch(PostResource.get, { id });
if (promise) {
  // fetch was triggered
}

const promise = useFetch(PostResource.get, { id });
if (!promise.resolved) {
  // fetch is in-flight
}
use(promise); // suspends or returns denormalized data

See Parallel data loading above for how this enables concurrent fetches that avoid sequential waterfalls. #3752, #3755

Direct schema imports​

Schema classes can now be imported directly from @data-client/endpoint (or @data-client/rest which re-exports them) instead of requiring the schema namespace. This provides a cleaner import syntax while maintaining full backward compatibility.

import { schema } from '@data-client/endpoint';

const myUnion = new schema.Union(
  { users: User, groups: Group },
  'type',
);

import { Union } from '@data-client/endpoint';

const myUnion = new Union(
  { users: User, groups: Group },
  'type',
);

All schema classes are available as direct exports: Union, Invalidate, Collection, Query, Values, All, and Lazy. The schema namespace export remains available for backward compatibility.

Upgrade support​

As usual, if you have any troubles or questions, feel free to join our or file a bug

• Vue 3 with full composables: useSuspense, useCache, useDLE, useController, useQuery

New Features:

• Collection.remove for removing items from collections
• RestEndpoint.remove for combined PATCH + collection removal
• Unions can query() without type discriminator
• Invalidate supports Unions for polymorphic delete operations
• mockInitialState() for simpler test setup

Performance:

• 10-20% improvement for get/denormalize operations

Breaking Changes:

• useDebounce() returns [val, isPending]
• ImmutableJS support moved to /imm exports
• Schema delegate interface consolidation

Vue 3 Support​

The new @data-client/vue package brings the full power of Reactive Data Client to Vue 3 with native composables. #3549, #3585

Installation​

npm install @data-client/vue @data-client/rest

Setup​

import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';

const app = createApp(App);
app.use(DataClientPlugin);
app.mount('#app');

Composables​

All the familiar hooks are available as Vue composables:

<script setup lang="ts">
import { useSuspense } from '@data-client/vue';
import { ArticleResource } from './resources';

const props = defineProps<{ id: string }>();

const article = await useSuspense(
  ArticleResource.get,
  computed(() => ({ id: props.id })),
);
</script>

<template>
  <article>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </article>
</template>

Available composables:

• useSuspense() - Suspense-enabled data fetching
• useCache() - Read from cache without fetching
• useDLE() - Data/Loading/Error pattern without Suspense #3592
• useController() - Access controller for mutations
• useQuery() - Direct schema queries

Testing with MockPlugin​

import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import { MockPlugin } from '@data-client/vue/test';

const app = createApp(App);
app.use(DataClientPlugin);
app.use(MockPlugin, {
  fixtures: [
    {
      endpoint: MyResource.get,
      args: [{ id: 1 }],
      response: { id: 1, name: 'Test' },
    },
  ],
});

Full Vue Guide

Collection.remove​

New schema for removing items from Collections without deleting the entity itself. #3560

import { schema } from '@data-client/rest';

const TodoCollection = new schema.Collection([Todo]);
const TodoResource = resource({
  path: '/todos/:id',
  schema: Todo,
}).extend({
  getList: { schema: TodoCollection },
});

// Remove from collection without deleting
ctrl.set(TodoResource.getList.schema.remove, { id: '123' });

This is useful when an item should be removed from a list view but still exist elsewhere:

// Remove user from a specific group list
ctrl.set(UserResource.getList.schema.remove, { id: userId, group: 'admins' });

RestEndpoint.remove​

RestEndpoint.remove combines PATCH update with collection removal - perfect for "archive" or "move" operations. #3623

const getTodos = new RestEndpoint({
  path: '/todos',
  schema: new schema.Collection([Todo]),
});

// Removes Todo from collection AND updates it with new data
await ctrl.fetch(
  getTodos.remove,
  {},
  { id: '123', title: 'Done', completed: true, archived: true }
);

// Move user between groups
await ctrl.fetch(
  UserResource.getList.remove,
  { group: 'team-a' },
  { id: 2, username: 'bob', group: 'team-b' }
);
// User removed from 'team-a' list AND entity updated with group: 'team-b'

Union Queries​

Unions can now be queried without specifying the type discriminator. #3558

// Type discriminator required
// @ts-expect-error - missing 'type'
const event = useQuery(EventUnion, { id });
// event is undefined

const newsEvent = useQuery(EventUnion, { id, type: 'news' });
// newsEvent is found

// Works without type discriminator
const event = useQuery(EventUnion, { id });
// event is found!

const newsEvent = useQuery(EventUnion, { id, type: 'news' });
// newsEvent is also found

Invalidate supports Unions​

schema.Invalidate now accepts Union schemas for polymorphic delete operations. Additionally, resource().delete automatically wraps Union schemas with Invalidate. #3559

const FeedUnion = new schema.Union(
  { posts: Post, comments: Comment },
  'type',
);

// resource() automatically handles Union delete
const FeedResource = resource({
  path: '/feed/:id',
  schema: FeedUnion,
});
await ctrl.fetch(FeedResource.delete, { id: '123' });

// For standalone endpoints, use schema.Invalidate directly
const deleteFeedItem = new RestEndpoint({
  path: '/feed/:id',
  method: 'DELETE',
  schema: new schema.Invalidate(FeedUnion),
});
await ctrl.fetch(deleteFeedItem, { id: '123' });

Testing Utilities​

mockInitialState()​

New utility for creating pre-populated state in tests. a4092a1

import { mockInitialState } from '@data-client/react/mock';
import { ArticleResource } from './resources';

const state = mockInitialState([
  {
    endpoint: ArticleResource.get,
    args: [{ id: 5 }],
    response: { id: 5, title: 'Hello', content: 'World' },
  },
]);

@data-client/core/mock​

New mock entrypoint with utilities for building custom mock implementations:

import { 
  MockController,
  collapseFixture,
  createFixtureMap,
} from '@data-client/core/mock';

• MockController - Controller wrapper for mocking endpoints
• collapseFixture - Resolves fixture responses (handles function responses)
• createFixtureMap - Separates fixtures into static map and interceptors

Performance​

Removing ImmutableJS auto-detection overhead and optimizing denormalization code paths provides a 10-20% improvement for get/denormalize operations. #3421, #3468

Other Improvements​

• Fix getPage types when paginationField is in body
• Fix schema.All() polymorphic handling of Invalidated entities
• Fix controller.get and controller.getQueryMeta 'state' argument types

Migration guide​

This upgrade requires updating all package versions simultaneously.

yarn add @data-client/react@^0.15.0 @data-client/rest@^0.15.0 @data-client/test@^0.15.0 @data-client/img@^0.15.0

npm install --save @data-client/react@^0.15.0 @data-client/rest@^0.15.0 @data-client/test@^0.15.0 @data-client/img@^0.15.0

pnpm add @data-client/react@^0.15.0 @data-client/rest@^0.15.0 @data-client/test@^0.15.0 @data-client/img@^0.15.0

<script type="module">
  import * from 'https://esm.sh/@data-client/react@^0.15.0';
  import * from 'https://esm.sh/@data-client/rest@^0.15.0';
  import * from 'https://esm.sh/@data-client/test@^0.15.0';
  import * from 'https://esm.sh/@data-client/img@^0.15.0';
</script>

useDebounce() returns [val, isPending]​

useDebounce() now returns a tuple with pending state, matching patterns from React 19's useTransition. #3459

import { useDebounce } from '@data-client/react';

const debouncedQuery = useDebounce(query, 100);

import { useDebounce } from '@data-client/react';

const [debouncedQuery] = useDebounce(query, 100);
// Or use the pending state
const [debouncedQuery, isPending] = useDebounce(query, 100);

ImmutableJS moved to /imm exports​

ImmutableJS support is no longer auto-detected. Use explicit /imm exports for ImmutableJS state handling. #3421, #3468

import { MemoCache, denormalize } from '@data-client/normalizr';

const memo = new MemoCache();
// Auto-detected ImmutableJS

import { MemoCache } from '@data-client/normalizr';
import { MemoPolicy, denormalize, normalize } from '@data-client/normalizr/imm';

const memo = new MemoCache(MemoPolicy);

The /imm entrypoint now includes both normalize() and denormalize() for complete ImmutableJS state handling:

import { normalize } from '@data-client/normalizr/imm';
import { fromJS } from 'immutable';

const result = normalize(Article, responseData, args, {
  entities: fromJS({}),
  indexes: fromJS({}),
  entitiesMeta: fromJS({}),
});
// result.entities is an ImmutableJS Map

This change provides a 10-20% performance improvement by removing ImmutableJS detection overhead for users not using it.

Schema delegate interface changes​

If you have custom schemas that override normalize() or queryKey(), the callback arguments have been consolidated into a delegate object. #3449

normalize()​

normalize(
  input: any,
  parent: any,
  key: string | undefined,
  args: any[],
  visit: (...args: any) => any,
  addEntity: any,
  getEntity: any,
  checkLoop: any,
): string {
  addEntity(this, processedEntity, id);
}

normalize(
  input: any,
  parent: any,
  key: string | undefined,
  args: any[],
  visit: (...args: any) => any,
  delegate: INormalizeDelegate,
): string {
  delegate.mergeEntity(this, id, processedEntity);
}

queryKey()​

queryKey(args, queryKey, getEntity, getIndex) {
  getIndex(schema.key, indexName, value)[value];
  getEntity(this.key, id);
  return queryKey(this.schema, args, getEntity, getIndex);
}

queryKey(args, unvisit, delegate) {
  delegate.getIndex(schema.key, indexName, value);
  delegate.getEntity(this.key, id);
  return unvisit(this.schema, args);
}

delegate.getEntity → delegate.getEntities #3501​

When iterating over all entities of a type, use delegate.getEntities() which returns a restricted interface with keys() and entries() iterator methods:

const entities = delegate.getEntity(this.key);
if (entities)
  Object.keys(entities).forEach(collectionPk => {
    if (!filterCollections(JSON.parse(collectionPk))) return;
    delegate.mergeEntity(this, collectionPk, normalizedValue);
  });

const entities = delegate.getEntities(this.key);
if (entities)
  for (const collectionKey of entities.keys()) {
    if (!filterCollections(JSON.parse(collectionKey))) continue;
    delegate.mergeEntity(this, collectionKey, normalizedValue);
  }

INVALID symbol removed​

The INVALID symbol is no longer exported. Use delegate methods instead. #3461

import { INVALID } from '@data-client/endpoint';

normalize(..., delegate) {
  delegate.setEntity(this, pk, INVALID);
}

queryKey(args, unvisit, delegate) {
  if (!found) return INVALID;
}

normalize(..., delegate) {
  delegate.invalidate({ key: this.key }, pk);
}

queryKey(args, unvisit, delegate) {
  if (!found) return delegate.INVALID;
}

state.entityMeta -> state.entitiesMeta​

Internal state property renamed for consistency. This only affects direct store access. #3451

NetworkManager data structure changes​

NetworkManager fetched, rejectors, resolvers, fetchedAt have been consolidated into fetching. #3394

if (action.key in this.fetched)

if (this.fetching.has(action.key))

MemoCache API changes (normalizr)​

For direct @data-client/normalizr users:

MemoCache.query() and buildQueryKey() take state as one argument #3372​

this.memo.buildQueryKey(schema, args, state.entities, state.indexes, key);
this.memo.query(schema, args, state.entities, state.indexes);

this.memo.buildQueryKey(schema, args, state, key);
this.memo.query(schema, args, state);

MemoCache.query() returns { data, paths }​

const { data } = this.memo.query(schema, args, state);
return typeof data === 'symbol' ? undefined : (data as any);

Upgrade support​

As usual, if you have any troubles or questions, feel free to join our or file a bug

Manager APIs have been streamlined—flatter action shapes reduce code complexity and improve performance by minimizing distinct inline cache entries, while simpler configuration APIs make customization more delightful.

• Simplified action shapes
• Manager.middleware property
• getDefaultManagers() configuration

Performance:

• Immediate fetch calls - no more waiting for idle
• 30% smaller bundles by removing unnecessary polyfills
• 10% faster normalization, 32% faster denormalization

Schema/Data Modeling:

• Query joins with Object Schemas
• EntityMixin for composing Entity behavior
• Entity.pk() default uses id
• Dynamic invalidation via Entity.process()

Testing:

• renderDataHook() for simpler testing

Garbage Collection:

• GCPolicy - automatic garbage collection of stale data

Breaking Changes:

• NetworkManager fetches immediately
• action.payload -> action.response
• action.meta.args -> action.args

Managers​

Manager APIs have been streamlined—flatter action shapes reduce code complexity and improve performance by minimizing distinct inline cache entries, while simpler configuration APIs make customization more delightful.

Action Shapes​

Action shapes are simplified and more consistent. #3143, #3139

• action.meta.args -> action.args
• action.meta.key -> action.key
• action.meta.nm removed (unused)
• action.payload -> action.response (for SET_RESPONSE)

{
  "type": "rdc/setresponse",
  "meta": {
    "key": "PATCH https://jsonplaceholder.typicode.com/todos/1",
    "payload": {
      "userId": 1,
      "id": 1,
      "title": "delectus aut autem",
      "completed": true
    },
    "args": [
      { "id": 1 },
      { "completed": true }
    ],
    "nm": true,
    "endpoint": {
      "name": "Todo.partialUpdate",
      "schema": {
        "key": "Todo",
        "schema": {}
      },
      "sideEffect": true,
    },
    "fetchedAt": "12:44:24.206 PM",
    "date": "12:44:24.334 PM",
    "expiresAt": "1:44:24.334 PM"
  },
  "error": false
}

{
  "type": "rdc/setresponse",
  "key": "PATCH https://jsonplaceholder.typicode.com/todos/1",
  "response": {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": true
  },
  "args": [
    { "id": 1 },
    { "completed": true }
  ],
  "endpoint": {
    "name": "Todo.partialUpdate",
    "schema": {
      "key": "Todo",
      "schema": {}
    },
    "sideEffect": true,
  },
  "meta": {
    "fetchedAt": "12:44:24.206 PM",
    "date": "12:44:24.334 PM",
    "expiresAt": "1:44:24.334 PM"
  },
  "error": false
}

Manager.middleware​

Managers can now use a middleware property instead of getMiddleware() method. #3164

class MyManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    // handle action
    return next(action);
  };

  cleanup() {}
}

class MyManager implements Manager {
  middleware: Middleware = controller => next => async action => {
    // handle action
    return next(action);
  };

  cleanup() {}
}

actionTypes without _TYPE suffix​

Cleaner action type names are now available (not breaking - we keep the old names as well). #3244

import type { Manager, Middleware } from '@data-client/react';
import { actionTypes } from '@data-client/react';

export default class LoggingManager implements Manager {
  middleware: Middleware = controller => next => async action => {
    switch (action.type) {
      case actionTypes.SET_RESPONSE_TYPE:
        console.info(
          `${action.endpoint.name} ${JSON.stringify(action.response)}`,
        );
      default:
        return next(action);
    }
  };

  cleanup() {}
}

import type { Manager, Middleware } from '@data-client/react';
import { actionTypes } from '@data-client/react';

export default class LoggingManager implements Manager {
  middleware: Middleware = controller => next => async action => {
    switch (action.type) {
      case actionTypes.SET_RESPONSE:
        console.info(
          `${action.endpoint.name} ${JSON.stringify(action.response)}`,
        );
      default:
        return next(action);
    }
  };

  cleanup() {}
}

getDefaultManagers()​

getDefaultManagers() now accepts configuration options. #3161

import { getDefaultManagers } from '@data-client/react';

// Remove DevToolsManager
const managers = getDefaultManagers({ devToolsManager: null });

// Configure DevToolsManager
const managers = getDefaultManagers({
  devToolsManager: {
    latency: 1000,
    predicate: (state, action) => action.type !== actionTypes.SET_RESPONSE,
  },
});

// Use custom NetworkManager
const managers = getDefaultManagers({
  networkManager: new IdlingNetworkManager(),
});

NetworkManager Constructor​

NetworkManager constructor now uses keyword arguments for clarity.

new NetworkManager(42, 7);

new NetworkManager({ dataExpiryLength: 42, errorExpiryLength: 7 });

Performance​

React 18+ concurrent mode and automatic batching change how we should optimize. Waiting for idle callbacks is no longer optimal—fetching immediately now provides better results. Internal changes leverage closures and Map data structures for faster normalization and lookup, while removing bloated polyfill dependencies shrinks bundles significantly.

Immediate Fetching​

NetworkManager now fetches immediately rather than waiting for idle callbacks. #3146

This results in faster data loading, especially for applications with complex render trees.

IdlingNetworkManager remains available for those who prefer the previous behavior:

import { IdlingNetworkManager, getDefaultManagers } from '@data-client/react';

const managers = getDefaultManagers({
  networkManager: new IdlingNetworkManager(),
});

Bundle Size​

Packages are now 30% smaller after removing bloated polyfill packages. #3384

Additionally, polyfills no longer pollute the global scope. #3353

Normalization Performance​

Internal schema interface changes provide a 10% normalization performance boost. #3134

Using Map instead of plain objects for entity storage provides up to 32% faster lookups for large datasets. #3390

Schema/Data Modeling​

Schema APIs reduce boilerplate for common patterns while enabling more advanced use cases. Client-side joins now work across arbitrary entities (not just nested relationships), dynamic invalidation handles server-only deletion logic, and sensible defaults like Entity.pk() using id eliminate repetitive code.

Query Joins​

Query can now take Object Schemas, enabling joins across multiple entity types. #3165

class Ticker extends Entity {
  product_id = '';
  price = 0;
  pk() { return this.product_id; }
}

class Stats extends Entity {
  product_id = '';
  last = 0;
  pk() { return this.product_id; }
}

// Join Ticker and Stats by product_id
const queryPrice = new schema.Query(
  { ticker: Ticker, stats: Stats },
  ({ ticker, stats }) => ticker?.price ?? stats?.last,
);

// Use in components
const price = useQuery(queryPrice, { product_id: 'BTC-USD' });

EntityMixin​

New EntityMixin for composing Entity behavior with existing classes. #3243

import { EntityMixin } from '@data-client/rest';

// Your existing class
export class Article {
  id = '';
  title = '';
  content = '';
  tags: string[] = [];
}

// Add Entity behavior
export class ArticleEntity extends EntityMixin(Article) {}

Entity.pk() Default​

Entity.pk() now defaults to this.id. #3188

class Todo extends Entity {
  id = '';
  title = '';
  completed = false;

  pk() {
    return this.id;
  }
}

class Todo extends Entity {
  id = '';
  title = '';
  completed = false;
}

Dynamic Invalidation​

Return undefined from Entity.process() to dynamically invalidate entities based on response data. #3407

class PriceLevel extends Entity {
  price = 0;
  amount = 0;

  pk() { return `${this.price}`; }

  static process(input: [number, number], parent: any, key: string | undefined) {
    const [price, amount] = input;
    // Invalidate when amount is 0
    if (amount === 0) return undefined;
    return { price, amount };
  }
}

resource()​

createResource() renamed to resource() for brevity. #3158

import { createResource } from '@data-client/rest';

const TodoResource = createResource({
  path: '/todos/:id',
  schema: Todo,
});

import { resource } from '@data-client/rest';

const TodoResource = resource({
  path: '/todos/:id',
  schema: Todo,
});

Testing​

Testing should be simple. New helpers use sensible defaults to eliminate boilerplate for common test scenarios.

renderDataHook()​

New renderDataHook() uses the default DataProvider, eliminating boilerplate. #3238

Additionally, makeRenderDataClient() has been renamed to makeRenderDataHook() for consistency (old name still works).

import { renderDataHook } from '@data-client/test';

const { result } = renderDataHook(
  () => useSuspense(ArticleResource.get, { id: 5 }),
  {
    initialFixtures: [
      {
        endpoint: ArticleResource.get,
        args: [{ id: 5 }],
        response: { id: 5, title: 'Test' },
      },
    ],
  },
);

Garbage Collection​

Long-running applications accumulate stale data in memory. New garbage collection policies automatically clean expired entries using reference counting to track which data is actively bound to components.

GCPolicy​

GCPolicy enables automatic garbage collection of stale data. #3343

import { GCPolicy, DataProvider } from '@data-client/react';

// Run GC sweep every 10 minutes
<DataProvider gcPolicy={new GCPolicy({ intervalMS: 60 * 1000 * 10 })}>
  {children}
</DataProvider>

Configure expiry behavior:

new GCPolicy({
  intervalMS: 60 * 1000 * 5,  // How often to run GC
  expiryMultiplier: 2,        // How many stale lifetimes before GC
})

Use ImmortalGCPolicy to disable garbage collection (previous default behavior):

import { ImmortalGCPolicy, DataProvider } from '@data-client/react';

<DataProvider gcPolicy={new ImmortalGCPolicy()}>
  {children}
</DataProvider>

Other Improvements​

• Collections work with polymorphic schemas like Union #3151
• Collections work with nested args (qs library compatibility) #3281
• Interceptors work on manager-dispatched actions #3365
• NetworkError messages include URL for better debugging
• React Native: InteractionManager.runAfterInteractions for reduced frame drops #3127
• React Native: react-native entry in package.json exports #3371
• Improved React 19 compatibility #3279

Migration guide​

This upgrade requires updating all package versions simultaneously.

yarn add @data-client/react@^0.14.0 @data-client/rest@^0.14.0 @data-client/test@^0.14.0 @data-client/img@^0.14.0

npm install --save @data-client/react@^0.14.0 @data-client/rest@^0.14.0 @data-client/test@^0.14.0 @data-client/img@^0.14.0

pnpm add @data-client/react@^0.14.0 @data-client/rest@^0.14.0 @data-client/test@^0.14.0 @data-client/img@^0.14.0

<script type="module">
  import * from 'https://esm.sh/@data-client/react@^0.14.0';
  import * from 'https://esm.sh/@data-client/rest@^0.14.0';
  import * from 'https://esm.sh/@data-client/test@^0.14.0';
  import * from 'https://esm.sh/@data-client/img@^0.14.0';
</script>

For all users​

NetworkManager fetches immediately​

NetworkManager now fetches immediately rather than waiting for idle. This improves performance with React 18+. #3146

To keep the previous behavior, use IdlingNetworkManager:

import { IdlingNetworkManager, getDefaultManagers } from '@data-client/react';

const managers = getDefaultManagers({
  networkManager: new IdlingNetworkManager(),
});

For custom Manager authors​

Skip this section if you don't have custom Managers.

action.payload -> action.response​

For custom Managers handling SET_RESPONSE: #3141

import {
  SET_RESPONSE_TYPE,
  type Manager,
  type Middleware,
} from '@data-client/react';

export default class MyManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    switch (action.type) {
      case SET_RESPONSE_TYPE:
        console.log('Resolved with value', action.payload);
        return next(action);
      default:
        return next(action);
    }
  };

  cleanup() {}
}

import {
  SET_RESPONSE_TYPE,
  type Manager,
  type Middleware,
} from '@data-client/react';

export default class MyManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    switch (action.type) {
      case SET_RESPONSE_TYPE:
        console.log('Resolved with value', action.response);
        return next(action);
      default:
        return next(action);
    }
  };

  cleanup() {}
}

fetchAction.payload removed​

For custom Managers handling FETCH: #3141

import {
  FETCH_TYPE,
  type Manager,
  type Middleware,
} from '@data-client/react';

export default class MyManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    switch (action.type) {
      case FETCH_TYPE:
        // consume fetch, and print the resolution
        action.payload().then(response => console.log(response));
      default:
        return next(action);
    }
  };

  cleanup() {}
}