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

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.

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

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:

@data-client/react 0.2

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

A atualização pode ser feita gradualmente, já que todas as mudanças foram lançadas inicialmente em /next.

1. Migre incrementalmente para as novas versões importando de /next

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

2. Atualize para a v0.2 - v0.4 (todas compatíveis).

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

3. Os imports podem ser atualizados incrementalmente após a atualização. /next exporta o mesmo que o nível superior.

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

Mudanças

• Controller.fetch(): 2545 Controller.fetch() retorna a forma desnormalizada quando o Endpoint tem um 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: a interface do NetworkManager mudou para suportar apenas as novas ações 2690

• Interfaces de SubscriptionManager/PollingSubscription simplificadas com base nas novas ações 2690

Remoções de itens descontinuados

• 2691: Remove DispatchContext, DenormalizeCacheContext

Descontinuações

• controller.receive, controller.receiveError 2690
• RECEIVE_TYPE 2690
• MiddlewareAPI.controller (MiddlewareAPI é simplesmente o próprio controller) 2690
  • ({controller}) => {} -> (controller) => {}

@data-client/rest 0.2

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

A atualização pode ser feita gradualmente, já que todas as mudanças foram lançadas inicialmente em /next.

1. Migre incrementalmente para as novas versões importando de /next

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

   Veja as migrações do diretório /examples como exemplo

2. Atualize para a v0.2-0.7 (todas compatíveis).

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

3. Os imports podem ser atualizados incrementalmente após a atualização. /next exporta o mesmo que o nível superior.

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

Mudanças

• getRequestInit e getHeaders do RestEndpoint podem opcionalmente retornar uma 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: Chamar super.getRequestInit() retornará uma promise - então você precisa resolvê-la:

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 uma Collection, à qual .create adiciona ao final 2593
  • Resource.create adicionará automaticamente à lista
    • Resource.getList.push é idêntico a Resource.create
  • Remova qualquer Endpoint.update, pois não é necessário e não funcionará
• Os parâmetros de GetEndpoint e MutateEndpoint mudaram para o que eram NewGetEndpoint e NewMutateEndpoint.
• Os genéricos de createResource() mudaram para O extends ResourceGenerics. Isso permite personalizar o tipo do Resource com body e searchParams 2593
  • createGithubResource<U extends string, S extends Schema> -> createGithubResource<O extends ResourceGenerics>

PR #2692 que promove o /next

Remoções de itens descontinuados

• 2690: Removido o descontinuado Endpoint.optimisticUpdate -> use Endpoint.getOptimisticResponse
• 2688 Remove a compatibilidade com FetchShape.

Suporte à atualização

Como sempre, se você tiver qualquer problema ou dúvida, fique à vontade para entrar no nosso ou abrir um bug