Pular para o conteúdo principal

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

· 8 min para ler
Nathaniel Tucker
Nathaniel Tucker
Creator of 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:

Resource.extend() (desde 0.5)​

Resource.extend() oferece três maneiras poderosas de personalizar resources. 51b4b0d

Adicionar novos endpoints​

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

Sobrescrever endpoints existentes​

const CachedArticleResource = ArticleResource.extend({
  getList: {
    dataExpiryLength: 10 * 60 * 1000, // 10 minutes
  },
});

Derivar a partir dos endpoints de base​

const IssueResource = createResource({
  path: '/issues/:id',
  schema: Issue,
}).extend(Base => ({
  byRepo: Base.getList.extend({
    path: '/repos/:owner/:repo/issues',
  }),
}));

Métodos do Controller​

controller.expireAll() (desde 0.3)​

Marca todas as respostas correspondentes como desatualizadas, disparando um refetch em segundo plano enquanto exibe os dados existentes. #2802

// Mark all article lists as stale - they'll refetch when rendered
controller.expireAll(ArticleResource.getList);

Isso difere de invalidateAll(), que remove os dados por completo. expireAll() continua exibindo os dados em cache enquanto busca dados novos em segundo plano.

controller.fetchIfStale() (desde 0.4)​

Busca apenas se os dados forem considerados desatualizados; caso contrário, retorna os dados em cache. #2804

// Perfect for prefetching - won't overfetch fresh data
const resolveData = async (controller, { owner, repo }) => {
  await controller.fetchIfStale(IssueResource.getList, { owner, repo });
};

Melhorias no DevTools​

Botão do DevTools​

Um botão flutuante agora aparece em modo de desenvolvimento para abrir rapidamente a extensão Redux DevTools. #2803

Configure-o ou desabilite-o pela prop devButton:

// Disable the button
<CacheProvider devButton={null}>
  <App />
</CacheProvider>
// Position it differently
<CacheProvider devButton="top-right">
  <App />
</CacheProvider>

Histórico persistente​

O DevTools não esquece mais o histórico se não estiver aberto no carregamento da página. 2d2e941

Melhor rastreamento de estado​

Como o React 18 agrupa atualizações em lote, o estado real às vezes pode ser atualizado a partir de várias actions. Quando o devtools está aberto, um estado sombra reflete com precisão as mudanças de cada action, facilitando a depuração. c9ca31f

Propriedades de Endpoint visíveis​

As propriedades de Endpoint agora ficam totalmente visíveis no inspetor do devtool. a7da00e

Aprimoramentos em Collection​

Filtragem por argumentos FormData (desde 0.4)​

Collections agora podem filtrar com base em argumentos FormData. f95dbc6

ctrl.fetch(getPosts.push, { group: 'react' }, new FormData(e.currentTarget));

Se o FormData contiver um campo author, o item recém-criado será adicionado corretamente às collections filtradas por esse autor.

paginationField (desde 0.7)​

Use paginationField para um suporte fácil à paginação. c8c557

const TodoResource = createResource({
  path: '/todos/:id',
  schema: Todo,
  paginationField: 'page',
});

// Fetches page 2 and appends to the collection
ctrl.fetch(TodoResource.getList.getPage, { page: '2' });

Outras melhorias​

  • Adição de className ao ErrorBoundary e errorClassName ao AsyncBoundary #2785
  • Novo export getDefaultManagers() para controle explícito dos managers #2791
  • Substituição de BackupBoundary por UniversalSuspense + BackupLoading #2803
  • Entity.process() recebe os args do endpoint como quarto parâmetro (desde 0.7) a8936f5
  • nonFilterArgumentKeys para Collection, para excluir parâmetros de ordenação da filtragem (desde 0.7) 318df89

Guia de migração​

Esta atualização exige atualizar todas as versões dos pacotes simultaneamente.

npm install --save @data-client/react@^0.9.0 @data-client/rest@^0.9.0 @data-client/test@^0.9.0 @data-client/img@^0.9.0 @data-client/hooks@^0.9.0

Remoção dos exports /next​

Todos os exports de subcaminho /next foram removidos. Os recursos que antes estavam em /next agora são os exports padrão. f65cf83

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

makeCacheProvider removido​

Use o componente provider diretamente com makeRenderDataClient. #2787

Before
import { makeCacheProvider } from '@data-client/react';
const renderDataClient = makeRenderDataClient(makeCacheProvider);
After
import { CacheProvider } from '@data-client/react';
const renderDataClient = makeRenderDataClient(CacheProvider);

Tipo de action DELETE -> INVALIDATE​

O tipo de action DELETE foi renomeado para INVALIDATE por clareza. #2784

Before
import { DELETE_TYPE } from '@data-client/react';
After
import { INVALIDATE_TYPE } from '@data-client/react';

Suporte a schemas legados descontinuado​

Todo o suporte a schemas legados foi removido. Certifique-se de estar usando a classe Entity atual. #2784

  • entity.expiresAt removido
  • Todas as sobrescritas de Entity para compatibilidade retroativa foram removidas

Serializadores de Schema devem suportar chamadas de função​

Os serializadores de Schema agora devem suportar chamadas de função. Date não funciona mais diretamente. #2795

Before
class MyEntity extends Entity {
  createdAt = new Date();

  static schema = {
    createdAt: Date,
  };
}
After
class MyEntity extends Entity {
  createdAt = new Date();

  static schema = {
    createdAt: (iso: string) => new Date(iso),
  };
}

Como alternativa, use Temporal:

import { Temporal } from 'temporal-polyfill';

class MyEntity extends Entity {
  createdAt = Temporal.Instant.fromEpochSeconds(0);

  static schema = {
    createdAt: Temporal.Instant.from,
  };
}

Tipos de action prefixados com 'rdc'​

Todos os tipos de action agora são prefixados com 'rdc' para um melhor namespacing. #2781

Nomes de action receive -> set​

Todos os nomes de action 'receive' foram renomeados para 'set'. #2782

Before
import { ReceiveAction, RECEIVE_TYPE } from '@data-client/react';
controller.receive(endpoint, args, response);
After
import { SetAction, SET_TYPE } from '@data-client/react';
controller.set(endpoint, args, response);

API de Middleware simplificada​

O Middleware não recebe mais controller como uma propriedade desestruturada - ele recebe o controller diretamente. #2786

Before
class LoggingManager implements Manager {
  getMiddleware = (): Middleware => ({ controller }) => next => async action => {
    console.log('before', action, controller.getState());
    await next(action);
    console.log('after', action, controller.getState());
  };

  cleanup() {}
}
After
class LoggingManager implements Manager {
  getMiddleware = (): Middleware => controller => next => async action => {
    console.log('before', action, controller.getState());
    await next(action);
    console.log('after', action, controller.getState());
  };

  cleanup() {}
}

getDefaultManagers()​

Os elementos CacheProvider não compartilham mais os managers padrão. Use getDefaultManagers() para controle explícito. #2791

import { getDefaultManagers, CacheProvider } from '@data-client/react';

const managers = getDefaultManagers();

<CacheProvider managers={managers}>
  <App />
</CacheProvider>

Suporte à atualização​

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