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

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.

TodoResource

TodoItem

CreateTodo

TodoList

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

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:

@data-client/react 0.2

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

La actualización puede hacerse de forma gradual, ya que todos los cambios se publicaron inicialmente en /next.

1. Migra de forma incremental a las nuevas versiones importando desde /next

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

2. Actualiza a v0.2 - v0.4 (todas compatibles).

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

3. Los imports pueden actualizarse de forma incremental después de la actualización. /next exporta lo mismo que el nivel superior.

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

Cambios

• Controller.fetch(): 2545 Controller.fetch() devuelve la forma desnormalizada cuando el Endpoint tiene un 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: La interfaz de NetworkManager cambió para admitir solo las nuevas acciones 2690

• Las interfaces de SubscriptionManager/PollingSubscription se simplificaron con base en las nuevas acciones 2690

Eliminación de elementos obsoletos

• 2691: Se eliminan DispatchContext y DenormalizeCacheContext

Deprecaciones

• controller.receive, controller.receiveError 2690
• RECEIVE_TYPE 2690
• MiddlewareAPI.controller (MiddlewareAPI es simplemente el propio controller) 2690
  • ({controller}) => {} -> (controller) => {}

@data-client/rest 0.2

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

La actualización puede hacerse de forma gradual, ya que todos los cambios se publicaron inicialmente en /next.

1. Migra de forma incremental a las nuevas versiones importando desde /next

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

   Consulta las migraciones del directorio /examples como ejemplo

2. Actualiza a v0.2-0.7 (todas compatibles).

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

3. Los imports pueden actualizarse de forma incremental después de la actualización. /next exporta lo mismo que el nivel superior.

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

Cambios

• getRequestInit y getHeaders de RestEndpoint pueden devolver opcionalmente una promesa 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: Llamar a super.getRequestInit() devolverá una promesa, así que debes resolverla:

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 usa una Collection, a la que .create agrega elementos 2593
  • Resource.create agregará automáticamente a la lista
    • Resource.getList.push es idéntico a Resource.create
  • Elimina cualquier Endpoint.update, ya que no es necesario y no funcionará
• Los parámetros de GetEndpoint y MutateEndpoint cambiaron a lo que eran NewGetEndpoint y NewMutateEndpoint.
• Los genéricos de createResource() cambiaron a O extends ResourceGenerics. Esto permite personalizar el tipo del Resource con body y searchParams 2593
  • createGithubResource<U extends string, S extends Schema> -> createGithubResource<O extends ResourceGenerics>

PR #2692 que incorpora /next al nivel superior

Eliminación de elementos obsoletos

• 2690: Se elimina el obsoleto Endpoint.optimisticUpdate -> usa Endpoint.getOptimisticResponse
• 2688 Se elimina la compatibilidad con FetchShape.

Soporte para la actualización

Como siempre, si tienes algún problema o pregunta, no dudes en unirte a nuestro o reportar un error