3 posts tagged with "Collections"

v0.18 focuses on richer data modeling for values that vary by request context, simpler typed downloads, and collection matching that better reflects real API filters.

New Features:

• Scalar schema - Lens-dependent entity fields (e.g. portfolio-specific values) without ever mutating the underlying entity
• RestEndpoint content property - Typed file downloads, text responses, and streaming with a single property
• resource() nonFilterArgumentKeys - Sort/pagination args don't fragment your Collections

Other Improvements:

• Binary Content-Type auto-detection - Images, PDFs, and other binary responses are handled automatically with no configuration (#3868)
• Collection extender body types match HTTP method semantics - PATCH extenders (.move, .remove) accept partial bodies; standalone RestEndpoint derives a typed body from the Collection's entity schema (#3910)
• Export CollectionOptions from @data-client/endpoint and @data-client/rest for typed Collection construction (#3904)

import { useSuspense, useFetch } from '@data-client/react';
import { getCompanies, getPortfolioColumns } from './api/Company';
import CompanyGrid from './CompanyGrid';

function PortfolioGrid() {
  const [portfolio, setPortfolio] = React.useState('A');
  // Fetches on first render, then re-denormalizes from cache on every
  // portfolio switch. The Collection's `queryKey()` ignores `portfolio`,
  // so there is no endpoint refetch on switch.
  const companies = useSuspense(getCompanies, { portfolio });
  // The first render's `useSuspense` already populated `Scalar(portfolio)`
  // for `firstPortfolio`, so we only fetch columns when the user switches
  // away. `useFetch` then dedupes later revisits via its endpoint cache.
  const firstPortfolio = React.useRef(portfolio).current;
  useFetch(
    getPortfolioColumns,
    portfolio === firstPortfolio ? null : { portfolio },
  );

  return (
    <div>
      <label>
        Portfolio:{' '}
        <select
          value={portfolio}
          onChange={e => setPortfolio(e.currentTarget.value)}
        >
          <option value="A">Portfolio A</option>
          <option value="B">Portfolio B</option>
        </select>
      </label>
      <CompanyGrid companies={companies} />
    </div>
  );
}

render(<PortfolioGrid />);

The example shows the same Company entities rendered through different portfolio lenses. Stable Entity fields are reused, while lens-dependent values are selected from separate Scalar cells.

Breaking Changes:

• Schema.denormalize() takes a delegate - denormalize(input, args, unvisit) → denormalize(input, delegate). Affects custom Schema implementations only.
• Schema.normalize() takes a delegate - normalize(input, parent, key, args, visit, delegate) → normalize(input, parent, key, delegate). Affects custom Schema implementations only.

Upgrade with the automated codemod:

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

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: