5 publicações com a etiqueta "REST"

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:

• Schema Scalar - Campos de entidade dependentes de lente (por exemplo, valores específicos de um portfólio) sem jamais mutar a entidade subjacente
• Propriedade content do RestEndpoint - Downloads de arquivo tipados, respostas em texto e streaming com uma única propriedade
• nonFilterArgumentKeys em resource() - Argumentos de ordenação/paginação não fragmentam suas Collections

Outras melhorias:

• Detecção automática de Content-Type binário - Imagens, PDFs e outras respostas binárias são tratadas automaticamente, sem nenhuma configuração (#3868)
• Os tipos de body dos extenders de Collection seguem a semântica dos métodos HTTP - Extenders PATCH (.move, .remove) aceitam bodies parciais; um RestEndpoint independente deriva um body tipado do schema de entidade da Collection (#3910)
• Exporta CollectionOptions de @data-client/endpoint e @data-client/rest para a construção tipada de Collections (#3904)

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

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:

• Schema.denormalize() recebe um delegate - denormalize(input, args, unvisit) → denormalize(input, delegate). Afeta apenas implementações personalizadas de Schema.
• Schema.normalize() recebe um delegate - normalize(input, parent, key, args, visit, delegate) → normalize(input, parent, key, delegate). Afeta apenas implementações personalizadas de Schema.

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

npx openskills install reactive/data-client/.agents/skills/data-client-v0.18-migration

claude plugin marketplace add reactive/data-client
claude plugin install migrations@data-client

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/

Novos recursos:

• Carregamento de dados em paralelo com useFetch() - Busque vários endpoints de forma concorrente com use(useFetch()), evitando cascatas sequenciais
• Collection.move - Mova entidades entre Collections com uma única operação
• Collection.moveWith() - Personalize o comportamento de mover (por exemplo, inserir no início em vez de no final)
• Lazy - Desnormalização adiada de relações, para desempenho e isolamento de memoização

Outras melhorias:

• Imports diretos de schema - Importe as classes de schema diretamente, sem o namespace schema
• Limite de profundidade de desnormalização - Evita estouro de pilha em grandes grafos bidirecionais de entidades; configurável via Entity.maxEntityDepth (#3822)
• DevToolsManager expõe globalThis.__DC_CONTROLLERS__ em modo de desenvolvimento para acesso programático à store a partir do Chrome DevTools MCP e do Expo MCP. Use a skill data-client-react para habilitar a depuração assistida por IA.
• Remoção do aviso enganoso 'Uncaught Suspense' durante o SSR do Next.js
• Correção do tipo sideEffect: false que se perdia com method: 'POST' em RestEndpoint
• renderDataHook() faz limpeza automática após cada teste — não são mais necessárias chamadas manuais a cleanup()
• renderDataHook() retorna cleanup() e allSettled() por renderização, para um encerramento confiável dos testes

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

Mudanças incompatíveis:

• path-to-regexp v8 - Sintaxe de RestEndpoint.path atualizada: /:optional? → {/:optional}, /:repeat+ → /*repeat (tipado como string[])
• useFetch() retorna UsablePromise - Retorna um thenable para React.use(); verifique .resolved em vez da truthiness

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/

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

Mudanças incompatíveis:

• Valores null mantidos em schemas de Array/Object

Outras melhorias:

• RestEndpoint.searchToString() para codificação personalizada de parâmetros de busca
• Exports getUrlBase, getUrlTokens para construção personalizada de URLs
• Correção de vazamento de memória no DevToolsManager

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

Mudanças incompatíveis:

• Remoção de todos os exports /next
• makeCacheProvider removido
• Tipo de action DELETE -> INVALIDATE
• Suporte a schemas legados descontinuado
• Serializadores de Schema devem suportar chamadas de função
• Tipos de action prefixados com 'rdc'

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

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

• @data-client/rest
  • RestEndpoint.getHeaders assíncrono
• @data-client/react
  • O valor de retorno de Controller.fetch() é desnormalizado a partir do schema
  • Atualizações nos tipos de ação dos Managers

Para todos os detalhes, continue lendo: