2 posts tagged with "Collections"

New Features:

• 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/

Collections enable Arrays and Objects to be easily extended by pushing or unshifting new members. The namesake comes from Backbone Collections.

Collections are now the default schema for Resource.getList.

import { useController } from '@data-client/react';
import { TodoResource } from './TodoResource';

export default function CreateTodo({ userId }: { userId: number }) {
  const ctrl = useController();
  const handleKeyDown = async e => {
    if (e.key === 'Enter') {
      ctrl.fetch(TodoResource.getList.push, {
        userId,
        title: e.currentTarget.value,
        id: Math.random(),
      });
      e.currentTarget.value = '';
    }
  };
  return (
    <div className="listItem nogap">
      <label>
        <input type="checkbox" name="new" checked={false} disabled />
        <input type="text" onKeyDown={handleKeyDown} />
      </label>
    </div>
  );
}

Upgrading is quite simple, as @data-client/rest/next and @data-client/react/next were introduced to allow incremental adoption of the new APIs changed in this release. This makes the actual upgrade a simple import rename.

Other highlights include

• @data-client/rest
  • async RestEndpoint.getHeaders
• @data-client/react
  • Controller.fetch() return value is denormalized from schema
  • Manager action type updates

For all details, keep reading: