4 publicaciones etiquetados con "Endpoint"

v0.18 se centra en un modelado de datos más rico para valores que varían según el contexto de la petición, descargas tipadas más simples y una coincidencia de collections que refleja mejor los filtros reales de las APIs.

Nuevas funcionalidades:

• Schema Scalar - Campos de entidad dependientes de un lens (p. ej. valores específicos de un portafolio) sin mutar jamás la entidad subyacente
• Propiedad content de RestEndpoint - Descargas de archivos tipadas, respuestas de texto y streaming con una sola propiedad
• nonFilterArgumentKeys en resource() - Los argumentos de ordenamiento/paginación no fragmentan tus Collections

Otras mejoras:

• Detección automática de Content-Type binarios - Las imágenes, PDFs y otras respuestas binarias se manejan automáticamente sin configuración (#3868)
• Los tipos de body de los extenders de Collection coinciden con la semántica del método HTTP - Los extenders PATCH (.move, .remove) aceptan bodies parciales; un RestEndpoint independiente deriva un body tipado a partir del schema de entidad de la Collection (#3910)
• Se exporta CollectionOptions desde @data-client/endpoint y @data-client/rest para construir Collections con tipado (#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 }),
  }),
});

El ejemplo muestra las mismas entidades Company renderizadas a través de distintos lenses de portafolio. Los campos estables de la Entity se reutilizan, mientras que los valores dependientes del lens se seleccionan de celdas Scalar separadas.

Cambios incompatibles:

• Schema.denormalize() recibe un delegate - denormalize(input, args, unvisit) → denormalize(input, delegate). Afecta solo a implementaciones personalizadas de Schema.
• Schema.normalize() recibe un delegate - normalize(input, parent, key, args, visit, delegate) → normalize(input, parent, key, delegate). Afecta solo a implementaciones personalizadas de Schema.

¿Usas un agente de IA? Instala la skill de migración: ejecuta el codemod, registra argsKey para los schemas que dependen de los argumentos y se encarga de los casos que el codemod no puede resolver (campos de clase, asignación dinámica de métodos, bloques <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

De lo contrario, ejecuta el codemod directamente; cubre los casos comunes:

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

Esta versión se centra en la consistencia y la extensibilidad. El manejo de null ahora es uniforme en todos los tipos de schema, lo que hace que las transformaciones de datos sean más predecibles. Las nuevas utilidades de URL permiten construir URLs personalizadas y codificar parámetros de búsqueda.

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

Cambios incompatibles:

• Los valores null se conservan en los schemas Array/Object

Otras mejoras:

• RestEndpoint.searchToString() para codificar parámetros de búsqueda de forma personalizada
• Exportaciones getUrlBase y getUrlTokens para construir URLs personalizadas
• Corrección de fuga de memoria en DevToolsManager

Esta versión se centra en la experiencia de desarrollo con un botón de devtools que aparece en modo de desarrollo, un mejor historial de DevTools y nuevos métodos del controller como controller.expireAll() y controller.fetchIfStale().

Resource.extend() ofrece tres formas potentes de personalizar recursos: agregar nuevos endpoints, sobrescribir los existentes o derivar a partir de los endpoints base.

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

Cambios incompatibles:

• Se eliminan todas las exportaciones /next
• makeCacheProvider eliminado
• Tipo de acción DELETE -> INVALIDATE
• Se abandona el soporte de schemas heredados
• Los serializadores de Schema deben admitir llamadas como función
• Tipos de acción con el prefijo 'rdc'

Las Collections permiten extender fácilmente Arrays y Objects agregando nuevos miembros con push o unshift. El nombre proviene de las Collections de Backbone.

Las Collections son ahora el schema predeterminado 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>
  );
}

Actualizar es bastante sencillo, ya que se introdujeron @data-client/rest/next y @data-client/react/next para permitir la adopción incremental de las nuevas APIs que cambian en esta versión. Esto convierte la actualización en sí en un simple cambio de nombre en los imports.

Otros aspectos destacados incluyen

• @data-client/rest
  • RestEndpoint.getHeaders asíncrono
• @data-client/react
  • El valor de retorno de Controller.fetch() se desnormaliza a partir del schema
  • Actualizaciones de los tipos de acción de Manager

Para todos los detalles, sigue leyendo: