https://dataclient.io/es/blog Data Client Blog 2026-05-01T00:00:00.000Z https://github.com/jpmonette/feed Data Client Blog <![CDATA[v0.18: Scalar, Typed File Downloads, Filter-aware Collections]]> https://dataclient.io/es/blog/2026/05/01/v0.18-scalar-typed-downloads 2026-05-01T00:00:00.000Z

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:

Other Improvements:

Fixtures
GET /companies
GET /companies/columns
▶api/Company
import { Collection, Entity, RestEndpoint, Scalar } from '@data-client/rest';

export class Company extends Entity {
  id = '';
  name = '';
  price = 0;
  pct_equity = 0;
  shares = 0;
}

const PortfolioScalar = new Scalar({
  lens: args => args[0]?.portfolio,
  key: 'portfolio',
  entity: Company,
});
Company.schema = {
  pct_equity: PortfolioScalar,
  shares: PortfolioScalar,
};

export const getCompanies = new RestEndpoint({
  path: '/companies',
  searchParams: {} as { portfolio: string },
  // `portfolio` is a lens, not a filter — the returned Company list is the same
  // regardless of lens. Dropping it from `argsKey` collapses every portfolio to
  // one Collection pk, so `Collection.queryKey()` finds the list on every
  // switch and `useSuspense` reuses it without refetching.
  schema: new Collection([Company], { argsKey: () => ({}) }),
});

export const getPortfolioColumns = new RestEndpoint({
  path: '/companies/columns',
  searchParams: {} as { portfolio: string },
  schema: new Collection([PortfolioScalar], {
    argsKey: ({ portfolio }: { portfolio: string }) => ({ portfolio }),
  }),
});
▶CompanyGrid
▶PortfolioGrid
Resultado
Store▶

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:

Using an AI agent? Install the migration skill — it runs the codemod, registers argsKey for args-dependent schemas, and handles the cases the codemod can't (class fields, dynamic method assignment, SFC <script> blocks, custom helpers):

npx skills add reactive/data-client --skill data-client-v0.18-migration

Otherwise, run the codemod directly — it covers the common cases:

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

Scalar​

Scalar handles Entity fields whose values depend on a runtime "lens" — like the selected portfolio, currency, or locale. Multiple components can render the same entity through different lenses simultaneously, each seeing the correct values, while the entity itself never changes. Lens-dependent values live in a separate cell table and are joined at denormalize time from endpoint args.

name and price references stay stable across portfolio switches because the Company entity itself never changes — only the Scalar cell selected by the current lens does. A single Scalar instance can serve both as an Entity.schema field (parent entity inferred from the visit) and standalone inside Values, [Scalar], or Collection([Scalar]) for cheap column-only refreshes (entity bound explicitly via entity). Cell pks are derived from the map key or via Scalar.entityPk(), which defaults to Entity.pk() so custom and composite primary keys work without an override.

The normalized store keeps the entity stable and the lens cells separate:

entities['Company']['1'] = {
  id: '1',
  price: 145.20,
  pct_equity: ['1', 'pct_equity', 'Company'],
  shares: ['1', 'shares', 'Company'],
}

entities['Scalar(portfolio)']['Company|1|A'] = { pct_equity: 0.50, shares: 10000 }
entities['Scalar(portfolio)']['Company|1|B'] = { pct_equity: 0.30, shares: 6000 }

The demo pairs getCompanies with a cheap getPortfolioColumns lens-only refresh writing to the same cell table — see the Scalar documentation for a full walkthrough of the caching behavior.

Scalar also implements queryKey so it participates directly in useQuery, Controller.get, and schema.Query — the full Queryable surface — enumerating its cells for the current lens.

#3887 - Scalar docs

RestEndpoint content property​

RestEndpoint now accepts a content property that controls how the response body is parsed. The return type is inferred automatically from the value, and schema is constrained to undefined at the type level for non-JSON content types.

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

const downloadFile = new RestEndpoint({
  path: '/files/:id/download',
  content: 'blob',
  dataExpiryLength: 0,
});

// Return type is Blob — inferred from content, no explicit generics needed
const blob: Blob = await ctrl.fetch(downloadFile, { id: '123' });

Previously, file downloads required a verbose parseResponse override. Now it's a single property.

ValueParses viaReturn type
'json'response.json()any
'blob'response.blob()Blob
'text'response.text()string
'arrayBuffer'response.arrayBuffer()ArrayBuffer
'stream'response.bodyReadableStream<Uint8Array>

Setting content to a non-JSON value enforces schema: undefined at the type level, since binary data cannot be normalized. A runtime check provides a clear error message if a normalizable schema is accidentally used.

Works with extend() and subclasses:

// Extend a JSON endpoint into a blob downloader
const download = jsonEndpoint.extend({
  content: 'blob',
  schema: undefined,
});

// Subclass for a reusable blob endpoint type
class BlobEndpoint<O extends RestGenerics = any> extends RestEndpoint<O> {
  content = 'blob' as const;
}

#3868 - content docs

resource() nonFilterArgumentKeys​

nonFilterArgumentKeys lets resource() declare which argument keys are not used to filter the collection results — typically sort, pagination, or display options. Without it, every distinct sort or page args would create a separate Collection bucket, and newly created items wouldn't appear in lists with different sort args even though the underlying data should match.

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

class Post extends Entity {
  id = '';
  title = '';
  group = '';
  author = '';
}

const PostResource = resource({
  path: '/:group/posts/:id',
  searchParams: {} as { orderBy?: string; author?: string },
  schema: Post,
  nonFilterArgumentKeys: ['orderBy'],
});

Now group and author are filter keys (they bucket separate Collections), but orderBy is shared — PostResource.getList.push() adds the new post to all orderBy variants of a given { group, author } bucket.

Accepts a string[], RegExp, or predicate function:

nonFilterArgumentKeys: /^(orderBy|page|cursor)$/,

#3914 - nonFilterArgumentKeys docs

Binary Content-Type auto-detection​

When content is not set, parseResponse now auto-detects binary Content-Types and returns response.blob() instead of corrupting the data via .text().

Binary types like image/*, audio/*, video/*, font/*, application/octet-stream, application/pdf, and others are now handled automatically. Text-like types (text/*, XML, HTML, JavaScript, CSS, etc.) continue to use the existing text fallback with schema-aware error messages.

This means endpoints that serve binary data with correct Content-Type headers work without any configuration:

const ep = new RestEndpoint({
  path: '/avatars/:id',
});
// Server responds with Content-Type: image/png
// → automatically returns a Blob (previously corrupted via .text())

#3868

Migration guide​

This upgrade requires updating all package versions simultaneously.

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

The breaking changes in this release affect only custom Schema implementations. If you only use resource() and built-in schemas (Entity, Collection, Union, Values, Array, Object, Query, Invalidate, Lazy, Scalar), the upgrade is drop-in.

Have a custom Schema? If you use an AI agent, install the migration skill and let it drive the whole flow — codemod, argsKey registration, and manual cleanup:

npx skills add reactive/data-client --skill data-client-v0.18-migration

Without an agent, run the codemod and then read the sections below for the cases it cannot handle (especially argsKey for args-dependent schemas):

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

Schema.denormalize() takes a delegate​

Skip this section if you don't implement custom Schema classes.

Schema.denormalize() is now (input, delegate) instead of the previous 3-parameter (input, args, unvisit) signature. The new IDenormalizeDelegate exposes unvisit, args, and a new argsKey(fn) helper. #3887

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

class Wrapper {
  denormalize(
    input: {},
    args: readonly any[],
    unvisit: (s: any, v: any) => any,
  ) {
    const value = unvisit(this.schema, input);
    return this.process(value, ...args);
  }
}
After
import { Entity, type IDenormalizeDelegate } from '@data-client/rest';

class Wrapper {
  denormalize(input: {}, delegate: IDenormalizeDelegate) {
    const value = delegate.unvisit(this.schema, input);
    return this.process(value, ...delegate.args);
  }
}

The codemod handles class methods, object methods, function declarations, TypeScript interface signatures, and pass-through someSchema.denormalize(input, args, unvisit) calls. It also adds the IDenormalizeDelegate import as an inline type specifier on your existing @data-client/* import (or creates a new import type line if none is found).

args-dependent output​

Reading delegate.args directly does not contribute to memoization. If your schema's output depends on those args (e.g. a lens), declare the dependency through delegate.argsKey(fn) so the cache buckets correctly.

The codemod cannot infer this dependency, so update these schemas by hand.
Before
class LensSchema {
  denormalize(input, args, unvisit) {
    const lens = args[0]?.portfolio;
    return this.lookup(input, lens);
  }
}
After
class LensSchema {
  constructor({ lens }) {
    this.lensSelector = lens;  // ①
  }
  denormalize(input, delegate) {
    const lens = delegate.argsKey(this.lensSelector);  // ②
    return this.lookup(input, lens);
  }
}
  1. ①The function reference is the cache key, so set it once here (or at module scope). An inline arrow would miss the cache on every call.
  2. ②argsKey returns fn(args) and records the dependency for memoization.

See Scalar for a worked example.

Schema.normalize() takes a delegate​

Skip this section if you don't implement custom Schema classes.

Schema.normalize() now reads endpoint args and the recursive visitor from INormalizeDelegate, matching the new denormalize delegate shape. The previous signature was (input, parent, key, args, visit, delegate, parentEntity?); the new signature is (input, parent, key, delegate, parentEntity?). #3934

Before
import type { INormalizeDelegate, Visit } from '@data-client/rest';

class Wrapper {
  normalize(
    input: any,
    parent: any,
    key: string,
    args: readonly any[],
    visit: Visit,
    delegate: INormalizeDelegate,
  ) {
    const normalized = visit(this.schema, input.value, input, 'value', args);
    delegate.mergeEntity(this, this.pk(input, parent, key, args), normalized);
    return normalized;
  }
}
After
import type { INormalizeDelegate } from '@data-client/rest';

class Wrapper {
  normalize(
    input: any,
    parent: any,
    key: string,
    delegate: INormalizeDelegate,
  ) {
    const { args, visit } = delegate;
    const normalized = visit(this.schema, input.value, input, 'value');
    delegate.mergeEntity(this, this.pk(input, parent, key, args), normalized);
    return normalized;
  }
}

If your schema accepts the optional parentEntity argument, keep it as the trailing argument:

normalize(input, parent, key, delegate, parentEntity) {
  // ...
}

delegate.visit() already carries the same args for recursive normalization, so nested schemas do not need args passed explicitly.

Additive: parentEntity on normalize​

The normalize delegate's visit() callback internally tracks the nearest enclosing entity-like schema and forwards it to Schema.normalize() as the optional trailing parentEntity argument. New schemas can opt in to discover their containing entity at normalize time (used internally by Scalar).

Optional: consolidate Collection definitions​

Collection can now use both argsKey and nestKey on the same instance. As an optional cleanup, replace paired top-level and nested Collections with one shared definition:

Before
export const getTodos = new RestEndpoint({
  path: '/todos',
  searchParams: {} as { userId?: string },
  schema: new Collection([Todo]),
});

class User extends Entity {
  static schema = {
    todos: new Collection([Todo], {
      nestKey: parent => ({ userId: parent.id }),
    }),
  };
}
After
export const userTodos = new Collection([Todo], {
  //argsKey: params => ({ ...params }), - this is default, so it's not needed
  nestKey: parent => ({ userId: parent.id }),
});

export const getTodos = new RestEndpoint({
  path: '/todos',
  searchParams: {} as { userId?: string },
  schema: userTodos,
});

class User extends Entity {
  static schema = {
    todos: userTodos,
  };
}

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.16: Parallel Fetching, Collection.move, Lazy]]> https://dataclient.io/es/blog/2026/04/01/v0.16-parallel-fetching-collection-move-lazy 2026-04-01T00:00:00.000Z

New Features:

Other Improvements:

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>
  );
}
Resultado
Store▶

Breaking Changes:

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} />);
Resultado
Store▶

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.

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

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.

v6 syntaxv8 syntaxDescription
/:optional?{/:optional}Optional parameter
/:repeat+/*repeatOne-or-more repeating (typed as string[])
/:repeat*{/*repeat}Zero-or-more repeating (typed as string[])
/:with-dash/:"with-dash"Quoted parameter name
/:id(\d+)/:idCustom regex removed

Optional parameters​

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

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

Multiple optional segments with different prefixes:

Before
const ep = new RestEndpoint({
  path: '/:attr1?{-:attr2}?{-:attr3}?',
});
After
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.

Before
const ep = new RestEndpoint({
  path: '/files/:path+',
});
ep({ path: 'docs/reports/q4' });
const optEp = new RestEndpoint({
  path: '/files/:path*',
});
After
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:

Before
const ep = new RestEndpoint({
  path: '/:with-dash',
});
After
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.

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

Escaping special characters​

Characters including {}()[]+?!:*\\ must be escaped with \\ when used as literals in the path pattern. These characters are reserved by path-to-regexp and unescaped usage throws an Unexpected token error. A literal query string in the pattern still needs an escaped ?, e.g. '/resource\\?per_page=50'.

When query segments use named parameters, prefer explicit groups instead of a single escaped ?:

Before
const ep = new RestEndpoint({
  path: '/search\\?q=:q',
});
After
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

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:

Before
const promise = useFetch(PostResource.get, { id });
if (promise) {
  // fetch was triggered
}
After
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.

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

const myUnion = new schema.Union(
  { users: User, groups: Group },
  'type',
);
After
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 Chat or file a bug

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.15: Vue 3, Collection.remove, useDebounce Upgrade]]> https://dataclient.io/es/blog/2026/01/06/v0.15-vue-support-collection-remove 2026-01-06T00:00:00.000Z

New Platforms:

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

New Features:

Performance:

Breaking Changes:

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/

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​

Install DataClientPlugin on your app:

main.ts
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:

ArticleDetail.vue
<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:

Testing with MockPlugin​

test setup
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' },
    },
  ],
});
Getting Started 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

Before
// 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
After
// 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

Benchmarks over time | View benchmark

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.

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

An automated codemod handles the breaking changes below:

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

useDebounce() returns [val, isPending]​

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

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

const debouncedQuery = useDebounce(query, 100);
After
import { useDebounce } from '@data-client/react';

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

The previous signature is still available via @data-client/react/next for gradual migration.

ImmutableJS moved to /imm exports​

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

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

const memo = new MemoCache();
// Auto-detected ImmutableJS
After
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()​

Before
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);
}
After
normalize(
  input: any,
  parent: any,
  key: string | undefined,
  args: any[],
  visit: (...args: any) => any,
  delegate: INormalizeDelegate,
): string {
  delegate.mergeEntity(this, id, processedEntity);
}

queryKey()​

Before
queryKey(args, queryKey, getEntity, getIndex) {
  getIndex(schema.key, indexName, value)[value];
  getEntity(this.key, id);
  return queryKey(this.schema, args, getEntity, getIndex);
}
After
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:

Before
const entities = delegate.getEntity(this.key);
if (entities)
  Object.keys(entities).forEach(collectionPk => {
    if (!filterCollections(JSON.parse(collectionPk))) return;
    delegate.mergeEntity(this, collectionPk, normalizedValue);
  });
After
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

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

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

queryKey(args, unvisit, delegate) {
  if (!found) return INVALID;
}
After
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

Before
if (action.key in this.fetched)
After
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​

Before
this.memo.buildQueryKey(schema, args, state.entities, state.indexes, key);
this.memo.query(schema, args, state.entities, state.indexes);
After
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 Chat or file a bug

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.14: Streamlined Manager APIs, Performance, and GC]]> https://dataclient.io/es/blog/2024/07/13/v0.14-release-announcement 2024-07-13T00:00:00.000Z 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.

Performance:

Schema/Data Modeling:

Testing:

Garbage Collection:

  • GCPolicy - automatic garbage collection of stale data

Breaking Changes:

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)
Before
{
  "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
}
After
{
  "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

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

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

  cleanup() {}
}
consejo

getMiddleware() still works for backward compatibility.

actionTypes without _TYPE suffix​

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

Before
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() {}
}
After
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.

Before
new NetworkManager(42, 7);
After
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

Benchmarks over time | View benchmark

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

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

  pk() {
    return this.id;
  }
}
After
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

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

const TodoResource = createResource({
  path: '/todos/:id',
  schema: Todo,
});
After
import { resource } from '@data-client/rest';

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

createResource remains exported for backward compatibility.

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.

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

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

Before
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() {}
}
After
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

Before
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() {}
}
After
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
        .endpoint(...action.args)
          .then(response => console.log(response));
      default:
        return next(action);
    }
  };

  cleanup() {}
}

action.meta.args -> action.args​

Action arguments moved from meta to top level. #3143

Before
const { args, key } = action.meta;
After
const { args, key } = action;

For custom Schema authors​

Skip this section if you don't have custom schemas implementing normalize() or denormalize().

Schema interface changes​

The normalize() and denormalize() interfaces have changed. #3134

This provides a 10% performance boost for all users.

Schema.normalize visit()​

The visit() interface now removes non-contextual arguments:

/** Visits next data + schema while recurisvely normalizing */
export interface Visit {
  (schema: any, value: any, parent: any, key: any, args: readonly any[]): any;
  creating?: boolean;
}
Before
processedEntity[key] = visit(
  processedEntity[key],
  processedEntity,
  key,
  this.schema[key],
  addEntity,
  visitedEntities,
  storeEntities,
  args,
);
After
processedEntity[key] = visit(
  this.schema[key],
  processedEntity[key],
  processedEntity,
  key,
  args,
);

The information needed from these arguments are provided by closing visit() around them.

Schema.normalize interface​

Changed from direct data access to using functions like getEntity:

interface SchemaSimple {
  normalize(
    input: any,
    parent: any,
    key: any,
    args: any[],
    visit: (
      schema: any,
      value: any,
      parent: any,
      key: any,
      args: readonly any[],
    ) => any,
    addEntity: (...args: any) => any,
    getEntity: (...args: any) => any,
    checkLoop: (...args: any) => any,
  ): any;
}

We also add checkLoop(), which moves some logic in Entity to the core normalize algorithm.

/** Returns true if a circular reference is found */
export interface CheckLoop {
  (entityKey: string, pk: string, input: object): boolean;
}

Schema.denormalize unvisit()​

The unvisit argument now takes schema argument first:

interface SchemaSimple {
  denormalize(
    input: {},
    args: readonly any[],
    unvisit: (schema: any, input: any) => any,
  ): T;
}

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.13: NextJS App Router, Expo, React 19, Redux]]> https://dataclient.io/es/blog/2024/06/17/v0.13-nextjs-app-router-expogo-native 2024-06-17T00:00:00.000Z

Platforms:

Testing:

Packages moved inside @data-client/react:

  • Redux
  • Hooks

Other Improvements

Breaking Changes:

nota

Version 0.12 was skipped due to a publishing mishap.

Platforms​

NextJS App Router​

NextJS 12 includes a new way of routing in the '/app' directory. This allows further performance improvements, as well as dynamic and nested routing. This makes NextJS a viable platform to build rich dynamic applications, rather than just static websites.

While other fetching methods require slow client-side fetching; Reactive Data Client provides the best of both SPA and MPA. #3074, #3093

Like MPAs, SSR with Data Client means the fastest possible initial page load. Like SPAs, Data Client offers faster navigation, client side mutations, and remote-driven mutations (like websockets) than MPAs.

Additionally, Data Client with SSR still provides the performance advantages over other client-side fetching libraries.

Performance vs Client Fetch
Bar lengths use a log scale
LCP3xClient fetch 1200 ms → Data Client 400 ms
Mutation603xClient fetch 1810 ms → Data Client 3 ms
List to detail navigation6.7xClient fetch 310 ms → Data Client 46 ms

Data Client performs streaming SSR of the HTML, streamlining the initial application load experience. Uniquely, Data Client is then immediately interactive with 0 client side fetches. This is achieved by initializing the Client Store with normalized data during the SSR phase.

Usage​

Render DataProvider from the /nextjs entrypoint in your root layout.

app/layout.tsx
import { DataProvider } from '@data-client/react/nextjs';
import { AsyncBoundary } from '@data-client/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>
          <header>Title</header>
          <AsyncBoundary>{children}</AsyncBoundary>
          <footer></footer>
        </DataProvider>
      </body>
    </html>
  );
}
Full NextJS Guide

Mutations demo​

Explora el ejemplo nextjs

Abrir en StackBlitzVer código fuente

More Demos

Live data demo​

Open in new tab Github

Other SSR​

Add /ssr entrypoint - eliminating the need for @data-client/ssr package completely d1b9e96

Before
import {
  createPersistedStore,
  createServerDataComponent,
} from '@data-client/ssr';
After
import {
  createPersistedStore,
  createServerDataComponent,
} from '@data-client/react/ssr';

This makes it possible to easily integrate Data Client into any SSR framework. We welcome contributions for integration with any open source framework.

Expo​

We have begun work on Expo/ExpoGo demos, and thus found and fixed some compatibility issues by these integrations. Please report any issues that we may have missed.

React 19​

We now support React 19. #3071

This required dropping support for versions less than 16.14, as we must use the jsx runtime exported from React itself. This has the added benefit of reducing the bundle size.

Redux​

Add @data-client/react/redux #3099. This removes the need for the separate @data-client/redux package.

Before
import {
  ExternalDataProvider,
  PromiseifyMiddleware,
  applyManager,
  initialState,
  createReducer,
  prepareStore,
} from '@data-client/redux';
After
import {
  ExternalDataProvider,
  PromiseifyMiddleware,
  applyManager,
  initialState,
  createReducer,
  prepareStore,
} from '@data-client/react/redux';

Add middlewares argument to prepareStore() #3099

const { store, selector, controller } = prepareStore(
  initialState,
  managers,
  Controller,
  otherReducers,
  extraMiddlewares,
);

controller.set()​

controller.set() updates any Queryable Schema. #3105, #3129

ctrl.set(
  Todo,
  { id: '5' },
  { id: '5', title: 'tell me friends how great Data Client is' },
);

Functions can be used in the value when derived data is used. This prevents race conditions.

const id = '2';
ctrl.set(Article, { id }, article => ({ id, votes: article.votes + 1 }));
nota

The response must include values sufficient to compute Entity.pk()

This makes it more straightforward to manipulate the store with Managers. For example we can directly set our Ticker entity when receiving websocket messages:

Explora el ejemplo coin-app

Abrir en StackBlitzVer código fuente

More Demos

Type improvements​

REST changes​

path strings​

Support + and * and {} in RestEndpoint.path. a6b4f4a

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

getThing({ attr1: 'hi' });
getThing({ attr2: 'hi' });
getThing({ attr3: 'hi' });
getThing({ attr1: 'hi', attr3: 'ho' });
getThing({ attr2: 'hi', attr3: 'ho' });

ctrl.fetch() and Unions​

Unions values in ctrl.fetch() return value are now an instance of their Entity class. #3063

import { getFeed } from './Feed';

function useFeedHandler() {
  const ctrl = useController();

  const handleSomething = async () => {
    const feed = await ctrl.fetch(getFeed);
    return feed.map(item => {
      if (item.type == 'link') {
        // we can use class defined getter
        return item.anchor;
      }
    });
  }
  return handleSomething;
}

Migration guide​

This upgrade requires updating all package versions simultaneously.

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

actionTypes.SET_TYPE -> actionTypes.SET_RESPONSE_TYPE​

If you wrote a custom Manager that handled actionTypes.SET_TYPE, you'll need to rename it actionTypes.SET_RESPONSE_TYPE.

Before
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_TYPE:
        console.info(
          `${action.endpoint.name} ${JSON.stringify(action.response)}`,
        );
        return next(action);
      // actions must be explicitly passed to next middleware
      default:
        return next(action);
    }
  };

  cleanup() {}
}
After
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)}`,
        );
        return next(action);
      // actions must be explicitly passed to next middleware
      default:
        return next(action);
    }
  };

  cleanup() {}
}

SetAction -> SetResponseAction​

React 16.14+​

Changes the minimum React version from 16.8.4 -> 16.14. There are no code updates needed.

npm install --save react@16.14 react-dom@16.14

CacheProvider -> DataProvider​

Move to DataProvider for future version compatibility. It is also exported as CacheProvider so this is not a breaking change. #3095

Before
import { CacheProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.body)
  .render(
  <CacheProvider>
    <App />
  </CacheProvider>,
);
Before
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.body)
  .render(
  <DataProvider>
    <App />
  </DataProvider>,
);

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.11 Queries, Queryable, and useQuery]]> https://dataclient.io/es/blog/2024/04/08/v0.11-queries-querable-usequery 2024-04-08T00:00:00.000Z

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.

Migration guide

Breaking Changes:

Other Highlights:

Querable​

Queryable schemas require an queryKey() method that returns something. These include Entity, All, Collection, Query, and Union.

interface Queryable {
  queryKey(
    args: readonly any[],
    queryKey: (...args: any) => any,
    getEntity: GetEntity,
    getIndex: GetIndex,
    // `{}` means non-void
  ): {};
}

schema.Query​

Query was previously implemented as an Endpoint. Since we now have methods of retrieving Queryable schemas directly, we can simply make Query another Queryable schema itself. It should be basically the same, allowing arbitrary computation on the value from a store. #2921

const getUserCount = new schema.Query(
  new schema.All(User),
  (entries, { isAdmin } = {}) => {
    if (isAdmin !== undefined)
      return entries.filter(user => user.isAdmin === isAdmin).length;
    return entries.length;
  },
);

const userCount = useQuery(getUserCount);
const adminCount = useQuery(getUserCount, { isAdmin: true });

schema.Query disallows non-Queryable schemas now.

const getBob = new schema.Query(
  // Array is not Queryable
  new schema.Array({ bob: '' }),
  thing => {
    return thing;
  },
);

controller.get / snapshot.get​

We can now access the store with just a Queryable Schema - we no longer need an entire Endpoint. #2921

Before
getOptimisticResponse(snapshot, { id }) {
  const { data: post } = snapshot.getResponse(Base.get, { id });
  if (!post) throw snapshot.abort;
  return {
    id,
    votes: post.votes + 1,
  };
}
After
getOptimisticResponse(snapshot, { id }) {
  const post = snapshot.get(Post, { id });
  if (!post) throw snapshot.abort;
  return {
    id,
    votes: post.votes + 1,
  };
}

Since we no longer need to access other Resource members to get Post, we can use the much simpler Resource.extend() overload.

Before
export const PostResource = createResource({
  path: '/posts/:id',
  schema: Post,
}).extend(Base => ({
  vote: new RestEndpoint({
    path: '/posts/:id/vote',
    method: 'POST',
    body: undefined,
    schema: Post,
    getOptimisticResponse(snapshot, { id }) {
      const { data: post } = snapshot.getResponse(Base.get, { id });
      if (!post) throw snapshot.abort;
      return {
        id,
        votes: post.votes + 1,
      };
    },
  }),
}));
After
export const PostResource = createResource({
  path: '/posts/:id',
  schema: Post,
}).extend('vote', {
  path: '/posts/:id/vote',
  method: 'POST',
  body: undefined,
  schema: Post,
  getOptimisticResponse(snapshot, { id }) {
    const post = snapshot.get(Post, { id });
    if (!post) throw snapshot.abort;
    return {
      id,
      votes: post.votes + 1,
    };
  },
});

useQuery​

Renders any Queryable Schema from the store. Queries are a great companion to efficiently render aggregate computations like those that use groupBy, map, reduce, and filter. #2921

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

const bob = useQuery(User, { username: 'bob' });
const getUserCount = new schema.Query(
  new schema.All(User),
  (entries, { isAdmin } = {}) => {
    if (isAdmin !== undefined)
      return entries.filter(user => user.isAdmin === isAdmin).length;
    return entries.length;
  },
);

const userCount = useQuery(getUserCount);
const adminCount = useQuery(getUserCount, { isAdmin: true });
const UserCollection = new schema.Collection([User], {
  argsKey: (urlParams: { groupId?: string }) => ({
    ...urlParams,
  }),
});

const usersInGroup = useQuery(UserCollection, { groupId: '5' });

Performance​

Further optimizations of both the caching system, and all critical code paths has given a decent boost of 2x to the most common operations. With the addition of query caching capability, we see an even more impressive 16x improvement to our Query sorting benchmark.

These adds to the existing (up to 23x) lead over the legacy normalizr library.

Benchmarks over time | View benchmark

Other improvements​

  • useCache() accepts Endpoints with sideEffects (like Resource.update) #2963 
    const lastCreated = useCache(MyResource.getList.push);
  • Allow pk to return numbers #2961
    Before
    class MyEntity extends Entity {
      id = 0;
      pk() {
        return `${this.id}`;
      }
    }
    After
    class MyEntity extends Entity {
      id = 0;
      pk() {
        return this.id;
      }
    }
  • Typing
    • Improve .extend() typing when using loose null checks and no body parameter #2962 
      Parameters<typeof new RestEndpoint({ path: '/test' }).extend({ path: '/test2' })> === []
    • Default Collection Args type is: 8377e 
      | []
      | [urlParams: Record<string, any>]
      | [urlParams: Record<string, any>, body: any]
  • Fixes
    • schema.All denormalize INVALID case should also work when class name mangling is performed in production builds #2954
      • unvisit() always returns undefined with undefined as input.
      • All returns INVALID from queryKey() to invalidate what was previously a special case in unvisit() (when there is no table entry for the given entity)
    • Missing nested entities should appear once they are present #2956, #2961

Migration guide​

This upgrade requires updating all package versions simultaneously.

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

Removed Index​

Just use Entities directly in useQuery

Before
const UserIndex = new Index(User);

const bob = useCache(UserIndex, { username: 'bob' });
After
const bob = useQuery(User, { username: 'bob' });

new Query -> new schema.Query​

Query is now a schema; used with useQuery

Before
const getUserCount = new Query(
  new schema.All(User),
  (entries, { isAdmin } = {}) => {
    if (isAdmin !== undefined)
      return entries.filter(user => user.isAdmin === isAdmin).length;
    return entries.length;
  },
);

const userCount = useCache(getUserCount);
const adminCount = useCache(getUserCount, { isAdmin: true });
After
const getUserCount = new schema.Query(
  new schema.All(User),
  (entries, { isAdmin } = {}) => {
    if (isAdmin !== undefined)
      return entries.filter(user => user.isAdmin === isAdmin).length;
    return entries.length;
  },
);

const userCount = useQuery(getUserCount);
const adminCount = useQuery(getUserCount, { isAdmin: true });

new AbortOptimistic() -> snapshot.abort​

snapshot.abort removes the need to import AbortOptimistic #2957

Before
getOptimisticResponse(snapshot, { id }) {
  const { data } = snapshot.getResponse(Base.get, { id });
  if (!data) throw new AbortOptimistic();
  return {
    id,
    votes: data.votes + 1,
  };
}
After
getOptimisticResponse(snapshot, { id }) {
  const { data } = snapshot.getResponse(Base.get, { id });
  if (!data) throw snapshot.abort;
  return {
    id,
    votes: data.votes + 1,
  };
}

Entity.useIncoming → Entity.shouldUpdate​

Make Entity.shouldUpdate name consistent with Entity.shouldReorder #2972

Before
class MyEntity extends Entity {
  static useIncoming(
    existingMeta: { date: number },
    incomingMeta: { date: number },
    existing: any,
    incoming: any,
  ) {
    return !deepEquals(existing, incoming);
  }
}
After
class MyEntity extends Entity {
  static shouldUpdate(
    existingMeta: { date: number },
    incomingMeta: { date: number },
    existing: any,
    incoming: any,
  ) {
    return !deepEquals(existing, incoming);
  }
}

useDLE() reactive native focus handling​

Like useSuspense() and useFetch(); useDLE() will now potentially revalidate data on focus events.

When using React Navigation, useDLE() will trigger fetches on focus if the data is considered stale.

This could result in more fetches than occured previously.

Potential, but unlikely breaking changes​

Schema.infer() -> Schema.queryKey() #2977​

Most people have not overridden the infer() method. In this case you need to rename to queryKey(), as well as update the parameter list.

Before
class MyEntity extends Entity {
  static infer(
    args: readonly any[],
    indexes: NormalizedIndex,
    recurse: any,
    entities: any,
  ): any {
    if (SILLYCONDITION) return undefined;
    if (entities[this.key]?.[someId]) return someId;
    return super.infer(args, indexes, recurse, entities);
  }
}
After
class MyEntity extends Entity {
  static queryKey(
    args: readonly any[],
    queryKey: (...args: any) => any,
    getEntity: GetEntity,
    getIndex: GetIndex,
  ): any {
    if (SILLYCONDITION) return undefined;
    if (getEntity(this.key, someId)) return someId;
    return super.queryKey(args, queryKey, getEntity, getIndex);
  }
}
getEntity(key, pk?)​

Gets all entities of a type with one argument, or a single entity with two

One argument
const entitiesEntry = getEntity(this.schema.key);
if (entitiesEntry === undefined) return INVALID;
return Object.values(entitiesEntry).map(
  entity => entity && this.schema.pk(entity),
);
Two arguments
if (getEntity(this.key, id)) return id;
getIndex(key, indexName, value)​

Returns the index entry (value->pk map)

const value = args[0][indexName];
return getIndex(schema.key, indexName, value)[value];

Always normalize pk to string type #2961​

Subtle change into what will be in the store. This will likely only matter when using @data-client/normalizr directly.

Before
{
  "Article": {
    "123": {
      "author": 8472,
      "id": 123,
      "title": "A Great Article"
    }
  },
  "User": {
    "8472": {
      "id": 8472,
      "name": "Paul"
    }
  }
}
After
{
  "Article": {
    "123": {
      "author": "8472",
      "id": 123,
      "title": "A Great Article"
    }
  },
  "User": {
    "8472": {
      "id": 8472,
      "name": "Paul"
    }
  }
}

state.results -> state.endpoints #2971​

This will only likely matter when consuming @data-client/core directly as internal state is structure is opaque to @data-client/react.

Before
{
  "entities": {
    "Article": {
      "5": {
        "content": "more things here",
        "id": 5,
        "title": "hi"
      }
    }
  },
  "results": {
    "GET http://test.com/articles/5": "5"
  }
}
After
{
  "entities": {
    "Article": {
      "5": {
        "content": "more things here",
        "id": 5,
        "title": "hi"
      }
    }
  },
  "endpoints": {
    "GET http://test.com/articles/5": "5"
  }
}

inferResults() -> memo.buildQueryKey() #2977, #2978​

These methods are exported in @data-client/core and @data-client/normalizr.

denormalizeCached() -> memo.denormalize() #2978​

Exported in @data-client/normalizr

Before
const endpointCache = new WeakEntityMap();
const entityCache = {};
denormalizeCached(
  input,
  schema,
  state.entities,
  entityCache,
  endpointCache,
  args,
);
After
const memo = new MemoCached();
memo.denormalize(
  input,
  schema,
  state.entities,
  args,
);

WeakEntityMap -> WeakDependencyMap #2978​

Exported in @data-client/normalizr

We generalize this data type so it can be used with other dependencies.

Before
new WeakEntityMap();
After
new WeakDependencyMap<EntityPath>();

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.10: Consistent Null Handling, URL Utilities]]> https://dataclient.io/es/blog/2024/02/15/v0.10-null-consistency-url-utilities 2024-02-15T00:00:00.000Z

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);
  }
}
Migration guide

Breaking Changes:

Other Improvements:

Consistent null handling​

null values are now consistently retained across all schema types. Previously, [] shorthand and schema.Array behaved differently when encountering null values. #2912

  • [] and schema.Array now behave identically
  • null values are retained everywhere (they were already retained in nested Entities)
  • undefined values are still filtered out

This change ensures more predictable behavior when working with APIs that explicitly return null to indicate absence of data versus undefined for missing fields.

URL Utilities​

RestEndpoint.searchToString()​

RestEndpoint.searchToString() enables custom encoding of search parameters. This is particularly useful for APIs that expect complex nested objects in query strings. #2919

For example, to encode complex objects using the qs library:

import { RestEndpoint, RestGenerics } from '@data-client/rest';
import qs from 'qs';

class MyEndpoint<O extends RestGenerics = any> extends RestEndpoint<O> {
  searchToString(searchParams) {
    return qs.stringify(searchParams);
  }
}

getUrlBase, getUrlTokens​

New exports getUrlBase and getUrlTokens provide the building blocks for custom RestEndpoint.url() implementations. #2919

import { getUrlBase, getUrlTokens } from '@data-client/rest';

// Parse path tokens for custom URL logic
const tokens = getUrlTokens('/users/:id/posts/:postId');
// => ['id', 'postId']

// Get base URL without path parameters
const base = getUrlBase('/users/:id');
// => '/users/'

DevToolsManager memory fix​

The DevToolsManager action buffer is now limited to 100 entries, preventing memory leaks in long-running applications or those with frequent updates. 4e6a39e

Migration Guide​

This upgrade requires updating all package versions simultaneously.

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

Null values in arrays​

If your code relied on null values being filtered out of arrays, you'll need to handle this explicitly:

Before
import { Entity, schema, RestEndpoint } from '@data-client/rest';

class User extends Entity {
  id = '';
  name = '';
  pk() { return this.id; }
}

const getUsers = new RestEndpoint({
  path: '/users',
  schema: new schema.Array(User),
});

// API response: [{ id: '1' }, null, { id: '2' }]
const usersWithoutNull = useSuspense(getUsers);
After
import { Entity, schema, RestEndpoint } from '@data-client/rest';

class User extends Entity {
  id = '';
  name = '';
  pk() { return this.id; }
}

const getUsers = new RestEndpoint({
  path: '/users',
  schema: new schema.Array(User),
});

// API response: [{ id: '1' }, null, { id: '2' }]
const usersWithoutNull = useSuspense(getUsers).filter(Boolean);

This change aligns with how nested Entities already handled null values, making the behavior consistent across all schema types.

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.9: DevTools, Resource.extend, and Legacy Cleanup]]> https://dataclient.io/es/blog/2024/01/15/v0.9-release-announcement 2024-01-15T00:00:00.000Z

This release focuses on developer experience with a devtools button that appears in development mode, better DevTools history, and new controller methods like controller.expireAll() and controller.fetchIfStale().

Resource.extend() provides three powerful ways to customize resources - adding new endpoints, overriding existing ones, or deriving from base endpoints.

const UserResource = createResource({
  path: '/users/:id',
  schema: User,
}).extend('current', {
  path: '/users/current',
});
Migration guide

Breaking Changes:

Resource.extend() (since 0.5)​

Resource.extend() provides three powerful ways to customize resources. 51b4b0d

Add new endpoints​

const UserResource = createResource({
  path: '/users/:id',
  schema: User,
}).extend('current', {
  path: '/users/current',
});

Override existing endpoints​

const CachedArticleResource = ArticleResource.extend({
  getList: {
    dataExpiryLength: 10 * 60 * 1000, // 10 minutes
  },
});

Derive from base endpoints​

const IssueResource = createResource({
  path: '/issues/:id',
  schema: Issue,
}).extend(Base => ({
  byRepo: Base.getList.extend({
    path: '/repos/:owner/:repo/issues',
  }),
}));

Controller Methods​

controller.expireAll() (since 0.3)​

Sets all matching responses to stale, triggering background refetch while showing existing data. #2802

// Mark all article lists as stale - they'll refetch when rendered
controller.expireAll(ArticleResource.getList);

This differs from invalidateAll() which removes the data entirely. expireAll() keeps showing the cached data while fetching fresh data in the background.

controller.fetchIfStale() (since 0.4)​

Fetches only if data is considered stale; otherwise returns the cached data. #2804

// Perfect for prefetching - won't overfetch fresh data
const resolveData = async (controller, { owner, repo }) => {
  await controller.fetchIfStale(IssueResource.getList, { owner, repo });
};

DevTools Improvements​

DevTools Button​

A floating button now appears in development mode to quickly open the Redux DevTools extension. #2803

Configure or disable it via the devButton prop:

// Disable the button
<CacheProvider devButton={null}>
  <App />
</CacheProvider>
// Position it differently
<CacheProvider devButton="top-right">
  <App />
</CacheProvider>

Persistent History​

DevTools no longer forgets history if not open on page load. 2d2e941

Better State Tracking​

Since React 18 batches updates, the real state can sometimes update from multiple actions. When devtools are open, a shadow state accurately reflects changes from each action for easier debugging. c9ca31f

Endpoint Properties Visible​

Endpoint properties are now fully visible in the devtool inspector. a7da00e

Collection Enhancements​

FormData argument filtering (since 0.4)​

Collections can now filter based on FormData arguments. f95dbc6

ctrl.fetch(getPosts.push, { group: 'react' }, new FormData(e.currentTarget));

If the FormData contains an author field, the newly created item will be properly added to collections filtered by that author.

paginationField (since 0.7)​

Use paginationField for easy pagination support. c8c557

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

// Fetches page 2 and appends to the collection
ctrl.fetch(TodoResource.getList.getPage, { page: '2' });

Other Improvements​

  • Add className to ErrorBoundary and errorClassName to AsyncBoundary #2785
  • New getDefaultManagers() export for explicit manager control #2791
  • Replace BackupBoundary with UniversalSuspense + BackupLoading #2803
  • Entity.process() receives endpoint args as fourth parameter (since 0.7) a8936f5
  • nonFilterArgumentKeys for Collection to exclude sort/order params from filtering (since 0.7) 318df89

Migration Guide​

This upgrade requires updating all package versions simultaneously.

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

Remove /next exports​

All /next subpath exports have been removed. Features previously in /next are now the standard exports. f65cf83

Before
import { useController } from '@data-client/react/next';
After
import { useController } from '@data-client/react';

makeCacheProvider removed​

Use the provider component directly with makeRenderDataClient. #2787

Before
import { makeCacheProvider } from '@data-client/react';
const renderDataClient = makeRenderDataClient(makeCacheProvider);
After
import { CacheProvider } from '@data-client/react';
const renderDataClient = makeRenderDataClient(CacheProvider);

DELETE -> INVALIDATE action type​

The DELETE action type has been renamed to INVALIDATE for clarity. #2784

Before
import { DELETE_TYPE } from '@data-client/react';
After
import { INVALIDATE_TYPE } from '@data-client/react';

Legacy schema support dropped​

All support for legacy schemas has been removed. Ensure you're using the current Entity class. #2784

  • entity.expiresAt removed
  • All Entity overrides for backwards compatibility removed

Schema Serializers must support function calls​

Schema Serializers must now support function calls. Date no longer works directly. #2795

Before
class MyEntity extends Entity {
  createdAt = new Date();

  static schema = {
    createdAt: Date,
  };
}
After
class MyEntity extends Entity {
  createdAt = new Date();

  static schema = {
    createdAt: (iso: string) => new Date(iso),
  };
}

Alternatively, use Temporal:

import { Temporal } from 'temporal-polyfill';

class MyEntity extends Entity {
  createdAt = Temporal.Instant.fromEpochSeconds(0);

  static schema = {
    createdAt: Temporal.Instant.from,
  };
}

Action types prefixed with 'rdc'​

All action types are now prefixed with 'rdc' for better namespacing. #2781

receive -> set action names​

All 'receive' action names have been renamed to 'set'. #2782

Before
import { ReceiveAction, RECEIVE_TYPE } from '@data-client/react';
controller.receive(endpoint, args, response);
After
import { SetAction, SET_TYPE } from '@data-client/react';
controller.set(endpoint, args, response);

Middleware API simplified​

Middleware no longer receives controller as a destructured property - it receives controller directly. #2786

Before
class LoggingManager implements Manager {
  getMiddleware = (): Middleware => ({ controller }) => next => async action => {
    console.log('before', action, controller.getState());
    await next(action);
    console.log('after', action, controller.getState());
  };

  cleanup() {}
}
After
class LoggingManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    console.log('before', action, controller.getState());
    await next(action);
    console.log('after', action, controller.getState());
  };

  cleanup() {}
}

getDefaultManagers()​

CacheProvider elements no longer share default managers. Use getDefaultManagers() for explicit control. #2791

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

const managers = getDefaultManagers();

<CacheProvider managers={managers}>
  <App />
</CacheProvider>

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker <![CDATA[v0.2 Controller.fetch, async getHeaders, Collections]]> https://dataclient.io/es/blog/2023/07/04/v0.2-release-announcement 2023-07-04T00:00:00.000Z

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>
  );
}
Resultado
Store▶

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

For all details, keep reading:

@data-client/react 0.2​

https://github.com/reactive/data-client/releases/tag/%40data-client%2Freact%400.2.0

Upgrading can be done gradually as all changes were initially released in /next.

  1. Incrementally move to new versions by importing from /next

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

  2. Upgrade to v0.2 - v0.4 (all compatible).

    npm install --save @data-client/rest@0.4.3

  3. Imports can be updated incrementally after upgrade. /next exports the same as top-level.

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

Changes​

  • Controller.fetch(): 2545 Controller.fetch() returns denormalized form when Endpoint has a Schema

    const handleChange = async e => {
      const todo = await ctrl.fetch(
        TodoResource.partialUpdate,
        { id: todo.id },
        { completed: e.currentTarget.checked },
      );
      // todo is Todo, we can use all its members and be type-safe
      console.log(todo.pk(), todo.title);
    };

  • NetworkManager: NetworkManager interface changed to only support new actions 2690

  • SubscriptionManager/PollingSubscription interfaces simplified based on new actions 2690

Removals of deprecated items​

  • 2691: Remove DispatchContext, DenormalizeCacheContext

Deprecations​

  • controller.receive, controller.receiveError 2690
  • RECEIVE_TYPE 2690
  • MiddlewareAPI.controller (MiddlewareAPI is just controller itself) 2690
    • ({controller}) => {} -> (controller) => {}

@data-client/rest 0.2​

https://github.com/reactive/data-client/releases/tag/%40data-client%2Frest%400.2.0

Upgrading can be done gradually as all changes were initially released in /next.

  1. Incrementally move to new versions by importing from /next

    import {
      RestEndpoint,
      createResource,
      GetEndpoint,
      MutateEndpoint,
    } from '@data-client/rest/next';

    See the migrations of the /examples directory as an example

  2. Upgrade to v0.2-0.7 (all compatible).

    npm install --save @data-client/rest@0.7.6

  3. Imports can be updated incrementally after upgrade. /next exports the same as top-level.

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

Changes​

  • RestEndpoint's getRequestInit and getHeaders optionally return a promise 2542

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

    export default class AuthdEndpoint<
      O extends RestGenerics = any,
    > extends RestEndpoint<O> {
      declare static accessToken?: string;

      async getHeaders(headers: HeadersInit) {
        return {
          ...headers,
          'Access-Token': await getOrFetchToken(),
        } as HeadersInit;
      }
    }

    export const TodoResource = createResource({
      urlPrefix: 'https://jsonplaceholder.typicode.com',
      path: '/todos/:id',
      schema: Todo,
      Endpoint: AuthdEndpoint,
    });

    BREAKING: Calling super.getRequestInit() will return a promise - so you must resolve it:

Before
class AuthdEndpoint<
  O extends RestGenerics = any,
> extends RestEndpoint<O> {
  getRequestInit(body: any): RequestInit {
    return {
      ...super.getRequestInit(body),
      credentials: 'same-origin',
    };
  }
}
After
class AuthdEndpoint<
  O extends RestGenerics = any,
> extends RestEndpoint<O> {
  async getRequestInit(body: any): Promise<RequestInit> {
    return {
      ...(await super.getRequestInit(body)),
      credentials: 'same-origin',
    };
  }
}
  • createResource().getList uses a Collection, which .create appends to 2593
    • Resource.create will automatically add to the list
      • Resource.getList.push is identical to Resource.create
    • Remove any Endpoint.update as it is not necessary and will not work
  • GetEndpoint and MutateEndpoint parameters changed to what NewGetEndpoint, NewMutateEndpoint was.
  • createResource() generics changed to O extends ResourceGenerics This allows customizing the Resource type with body and searchParams 2593
    • createGithubResource<U extends string, S extends Schema> -> createGithubResource<O extends ResourceGenerics>

Hoisting /next PR #2692

Removals of deprecated items​

  • 2690: Removed deprecated Endpoint.optimisticUpdate -> use Endpoint.getOptimisticResponse
  • 2688 Remove FetchShape compatibility.

Upgrade support​

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

]]> Nathaniel Tucker https://github.com/ntucker