Pular para o conteúdo principal

10 publicações com a etiqueta "Versões"

Novas versões do Reactive Data Client

Ver todas as etiquetas

v0.19: Coding Agents, Batch Controller.set(), Faster TypeScript

· 37 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

v0.19 makes coding agents a first-class way to build with Data Client: one prompt sets up your app, and your agent follows skills that ship with the packages you installed. It also lets a Manager write a whole batch of streamed rows in one store update, type-checks endpoint code about 2x faster, and fixes a round of TypeScript and Vue issues.

Coding Agents:

  • One-prompt setup - Add the data-client plugin to Claude Code, Cursor or Codex and ask it to set up Data Client; it installs the packages, adds the provider and links the skills your app needs
  • Skills ship in the packages - npx --no data-client-skills links the skills your installed @data-client/* packages carry, so your agent follows the version you have instead of an older release
  • Agents keep using Data Client - Setup adds a note to AGENTS.md, and each skill names the everyday tasks it covers, so later sessions reach for Data Client instead of fetch in useEffect
  • Debug the running app - In development, globalThis.__DC__ gives your agent the store's Controller and recent actions from Cursor's browser, Chrome DevTools MCP, Playwright MCP or Claude in Chrome
  • Vue skills, llms.txt, and skills generated from these docs

New APIs:

Performance:

Other Improvements:

  • Fix TypeScript 7 module resolution for package exports; imports now resolve to declaration files (#4019)
  • renderDataHook() runs provider mount effects when the first render suspends (#4099)
  • Controller.set() values are typed by the schema, so ctrl.set(new schema.All(Todo), 42) is a TypeScript error (#4133)
  • Controller.set() deletes one entity with an Invalidate schema without the one-row batch workaround (#4230)
  • process() gets typed params in new RestEndpoint(), .extend() and resource().extend(), so a wrong path parameter is a TypeScript error instead of undefined at runtime (#4183, #4184)
  • getOptimisticResponse() returns are typed by the schema, so a wrong field type is a TypeScript error instead of a flash of bad data (#4198)
  • Vue useSuspense() and useLive() keep the previous data while new arguments load, instead of returning undefined (#4131)
  • Vue useSuspense() and useLive() send fetch errors after arguments change to onErrorCaptured() instead of an unhandled promise rejection (#4135)
  • Vue useSuspense(), useDLE() and useFetch() no longer refetch stale data on every store update, so a controller.set() is not overwritten (#4134)
  • Vue useSuspense() shows stale data on mount and refetches in the background, like React, instead of showing the <Suspense> fallback until the refetch finishes (#4169)
  • Vue useDLE() and useCache() keep expired invalidIfStale data through unrelated store updates instead of getting stuck loading (#4142)
  • Vue DataClientPlugin installs on Vue versions before 3.5 instead of throwing app.onUnmount is not a function (#4146)
  • Vue DataClientPlugin garbage collects by default, matching React's DataProvider, so you no longer need to pass gcPolicy; how it decides what to remove (#4148)
  • Vue composables accept getter arguments like () => ({ id: props.id }); they were typed to allow them but passed the function itself to the endpoint (#4115)
  • Fix Cannot find name 'NoInfer' and export type errors on TypeScript 4.x with skipLibCheck off (#4138)
  • Fix Entity, Endpoint, Union and RestEndpoint type errors on TypeScript 4.0–4.5 with skipLibCheck off (#4140)
  • Fix ',' expected errors importing @data-client/react/redux, @data-client/react/nextjs or @data-client/test on TypeScript 4.0–4.4 (#4232)
  • Fix act and renderHook from @data-client/test typed as any on TypeScript 4.0–4.4 (#4251)
  • React Native useSuspense(), useFetch() and useDLE() refetch on screen focus only when the current data is stale or invalid, instead of refetching fresh data on every refocus (#4378)
  • renderDataHook() works with React Native Testing Library 14 and stays synchronous, so renderDataHook() calls need no await (#4374)
  • Entity classes can be used where an EntityInterface is expected (#4149); prepare pk() overrides for a future release
  • useCache() and useDLE() return undefined for a deleted entity whose refetch failed, instead of a truthy Symbol that slipped past if (!data) checks; remove any workarounds (#4150)
  • Vue useFetch() keeps its data from being garbage collected while mounted, like useSuspense(), so a configured gcPolicy no longer evicts prefetched data that components read later (#4152)
  • Apps with Redux DevTools open no longer stutter in development on large stores or frequent updates; each update serializes 40-60x faster (#4163)
  • resource().extend() with an object of endpoint overrides keeps endpoints added earlier with .extend('name', options) in its type, so using them is no longer a TypeScript error (#4184)
  • RestEndpoint.push, unshift and remove accept the Entity's fields as the body when a Query or Lazy wraps the Collection, instead of only FormData (#4226)
  • Vue useFetch() is typed as the read-only Ref it returns, so promise.resolved (always undefined) is now a TypeScript error; read promise.value.resolved instead (#4114)
  • A Controller subclass passed to DataProvider or DataClientPlugin no longer needs a cast to type-check (#4228)
  • prepareStore()'s store can be passed to react-redux's <Provider> without a cast, and has dispatch() in its type (#4238)
  • resource().create accepts FormData without a cast, like update, partialUpdate and getList.push (#4235)
  • RestEndpoint.push, unshift and remove send an array body as JSON, so creating or removing several items at once no longer sends "[object Object]" to your server; resource().create takes an array too (#4262)
  • Polling keeps the schema of endpoints given pollFrequency with .extend(), so a polled useLive() list updates right away from mutations and optimistic updates instead of waiting for the next poll (#4437)
  • DataProvider only warns that it doesn't update during SSR when something fetches while the server renders, instead of on every server render, so pages that load data after mount (like Expo Router's static web output) stay quiet (#4449)
  • Server rendering with React 19 no longer logs "Uncaught suspense" when nothing suspended; React renders and discards fallbacks of large boundaries, and the warning now waits for a fallback that actually shows (#4450)
  • Vue createDataClient() is deprecated, since it's internal to DataClientPlugin; install the plugin with app.use(DataClientPlugin, options) instead of calling it directly (#4193)
  • Vue renderDataCompose()'s waitForNextUpdate() is deprecated, since it gives up silently after 1 second and lets a test pass while still suspended; await result instead, or await allSettled() after a change, which now also waits for fetches a prop change starts (unit testing composables, #4221)

Breaking Changes:

Get ready for future releases:

v0.18: Scalar, downloads de arquivo tipados, Collections conscientes de filtros

· 12 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

A v0.18 foca em uma modelagem de dados mais rica para valores que variam conforme o contexto da requisição, downloads tipados mais simples e uma correspondência de collections que reflete melhor os filtros reais das APIs.

Novos recursos:

Outras melhorias:

Fixtures
▶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
Pré-visualização
Store▶

O exemplo mostra as mesmas entidades Company renderizadas através de diferentes lentes de portfólio. Os campos estáveis da Entity são reutilizados, enquanto os valores dependentes de lente são selecionados de células Scalar separadas.

Mudanças incompatíveis:

Usa um agente de IA? Instale a skill de migração — ela executa o codemod, registra argsKey para schemas dependentes de args e trata os casos que o codemod não consegue (campos de classe, atribuição dinâmica de métodos, blocos <script> de SFC, helpers personalizados):

npx skills add reactive/data-client --skill data-client-v0.18-migration
Execute no seu terminal

Caso contrário, execute o codemod diretamente — ele cobre os casos comuns:

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

v0.16: Busca em paralelo, Collection.move, Lazy

· 13 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Novos recursos:

Outras melhorias:

Collection.move facilita mover entidades entre Collections com uma única operação:

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>
  );
}
Pré-visualização

Mudanças incompatíveis:

Atualize com um codemod automatizado para todas as mudanças incompatíveis:

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

v0.15: Vue 3, Collection.remove, atualização do useDebounce

· 10 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Novas plataformas:

  • Vue 3 com composables completos: useSuspense, useCache, useDLE, useController, useQuery

Novos recursos:

Desempenho:

Mudanças incompatíveis:

Atualize com um codemod automatizado para as mudanças incompatíveis mais comuns:

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

v0.14: APIs de Manager simplificadas, desempenho e GC

· 13 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Managers:

As APIs de Manager foram simplificadas — formatos de action mais planos reduzem a complexidade do código e melhoram o desempenho ao minimizar entradas distintas de cache inline, enquanto APIs de configuração mais simples tornam a personalização mais agradável.

Desempenho:

Schema/modelagem de dados:

Testes:

Coleta de lixo:

  • GCPolicy - coleta de lixo automática de dados desatualizados

Mudanças incompatíveis:

v0.13: NextJS App Router, Expo, React 19, Redux

· 9 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Plataformas:

Testes:

Pacotes movidos para dentro de @data-client/react:

  • Redux
  • Hooks

Outras melhorias

Mudanças incompatíveis:

observação

A versão 0.12 foi pulada devido a um problema na publicação.

v0.11 Queries, Queryable e useQuery

· 12 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Além dos benefícios de desempenho e integridade de dados de normalizar o estado, ganhamos a vantagem adicional de poder acessar e consultar a store diretamente com segurança.

Nesta versão, ajustamos e simplificamos essa funcionalidade unificando tudo em torno do conceito de Schemas Queryable. Eles incluem Entity, All, Collection, Query e Union

O maior impacto dessa mudança é a introdução de um novo hook, useQuery(), que permite consultas diretas à store usando os Schemas Queryable.

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' });

De forma semelhante, podemos consultar Queryables com o controller e o snapshot usando controller.get

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

Além disso, investimos em mais melhorias de desempenho, resultando em um ganho de cerca de 2x na maioria das operações e em Queries 16x mais rápidas.

Guia de migração

Mudanças incompatíveis:

Outros destaques:

v0.10: Tratamento consistente de null, utilitários de URL

· 4 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Esta versão foca em consistência e extensibilidade. O tratamento de null agora é uniforme em todos os tipos de schema, tornando as transformações de dados mais previsíveis. Novos utilitários de URL permitem construção personalizada de URLs e codificação de parâmetros de busca.

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

Mudanças incompatíveis:

Outras melhorias:

v0.9: DevTools, Resource.extend e limpeza de legado

· 8 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Esta versão foca na experiência do desenvolvedor, com um botão de devtools que aparece em modo de desenvolvimento, um histórico do DevTools melhor e novos métodos do controller como controller.expireAll() e controller.fetchIfStale().

Resource.extend() oferece três maneiras poderosas de personalizar resources - adicionar novos endpoints, sobrescrever os existentes ou derivar a partir dos endpoints de base.

const UserResource = createResource({
  path: '/users/:id',
  schema: User,
}).extend('current', {
  path: '/users/current',
});
Guia de migração

Mudanças incompatíveis:

v0.2 Controller.fetch, getHeaders assíncrono, Collections

· 6 min para ler
Nathaniel Tucker
Nathaniel Tucker
Criador do Reactive Data Client

Collections permitem estender Arrays e Objects com facilidade fazendo push ou unshift de novos membros. O nome vem das Collections do Backbone.

Collections agora são o schema padrão de 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>
  );
}
Pré-visualização

Atualizar é bem simples, pois @data-client/rest/next e @data-client/react/next foram introduzidos para permitir a adoção incremental das novas APIs alteradas neste lançamento. Isso torna a atualização em si uma simples renomeação de imports.

Outros destaques incluem

Para todos os detalhes, continue lendo: