5 posts tagged with "Schemas"

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/

New Platforms:

• 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

Upgrade with an automated codemod for common breaking changes:

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

Besides the performance and data integrity benefits of normalizing the state, we get the added benefit of being able to safely access and query the store directly.

In this release we tune and simplify this functionality by unifying around the concepts of Querable Schemas. These include Entity, All, Collection, Query, and Union

The biggest impact of this change is the introduction of a new hook useQuery(), which allows direct store lookups using the Querable Schemas.

class User extends Entity {
  username = '';
  id = '';
  groupId = '';
  pk() {
    return this.id;
  }
  static index = ['username' as const];
}

const bob = useQuery(User, { username: 'bob' });
const bob = useQuery(User, { id: '5' });

Similarly, we can lookup Querables with controller and snapshot using the controller.get

const bob = snapshot.get(User, { username: 'bob' });

Additionally, we have invested in further performance improvements, resulting in around a 2x performance increase for most operations and Queries being 16x faster.

Breaking Changes:

• useCache(new Index(MyEntity)) -> useQuery(MyEntity)
• new Query -> new schema.Query
  • useCache(myQuery) -> useQuery(myQuery)
• new AbortOptimistic() -> snapshot.abort
• Entity.useIncoming → Entity.shouldUpdate

Other Highlights:

• useCache() accepts Endpoints with sideEffects (like Resource.update)
• Allow Entity.pk() to return numbers.
• 2-16x performance improvements

This release focuses on consistency and extensibility. Null handling is now uniform across all schema types, making data transformations more predictable. New URL utilities enable custom URL construction and search parameter encoding.

class MyEndpoint<O extends RestGenerics = any> extends RestEndpoint<O> {
  searchToString(searchParams) {
    // Use qs library for complex nested object encoding
    return qs.stringify(searchParams);
  }
}

Breaking Changes:

• Null values retained in Array/Object schemas

Other Improvements:

• RestEndpoint.searchToString() for custom search param encoding
• getUrlBase, getUrlTokens exports for custom URL construction
• DevToolsManager memory leak fix