Pular para o conteúdo principal

Mutações de dados

Usar nossos endpoints de Create, Update e Delete com Controller.fetch() atualiza de forma reativa todos os componentes apropriados de maneira atômica (ao mesmo tempo).

useController() dá aos componentes acesso a este setState() global turbinado.

import { useController } from '@data-client/react';
import { TodoResource, type Todo } from './TodoResource';

export default function TodoItem({ todo }: { todo: Todo }) {
  const ctrl = useController();
  const handleChange = e =>
    ctrl.fetch(
      TodoResource.partialUpdate,
      { id: todo.id },
      { completed: e.currentTarget.checked },
    );
  const handleDelete = () =>
    ctrl.fetch(TodoResource.delete, {
      id: todo.id,
    });
  return (
    <div className="listItem nogap">
      <label>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={handleChange}
        />
        {todo.completed ? <s>{todo.title}</s> : todo.title}
      </label>
      <CancelButton onClick={handleDelete} />
    </div>
  );
}
Resultado
Store▶

Em vez de disparar cascatas de invalidação ou usar funções de atualização escritas à mão, o Data Client atualiza de forma reativa os componentes apropriados usando a resposta do fetch.

Mutações otimistas baseadas no estado anterior​

import { resource } from '@data-client/rest';
import { Post } from './Post';

export { Post };

export const PostResource = resource({
  path: '/posts/:id',
  searchParams: {} as { userId?: string | number } | undefined,
  schema: Post,
}).extend('vote', {
  path: '/posts/:id/vote',
  method: 'POST',
  body: undefined,
  schema: Post,
  getOptimisticResponse(snapshot, { id }) {
    const post = snapshot.get(Post, { id });
    if (!post) throw snapshot.abort;
    return {
      id,
      votes: post.votes + 1,
    };
  },
});
Resultado
Store▶

getOptimisticResponse é como o setState com uma função atualizadora. Snapshot fornece acesso com tipagem segura ao valor anterior do store, que usamos para retornar a resposta de fetch esperada.

O Reactive Data Client garante a integridade dos dados contra qualquer possível falha de rede ou race condition, então não se preocupe com falhas de rede, várias chamadas de mutação editando os mesmos dados ou outros problemas comuns da programação assíncrona.

Acompanhando o carregamento de mutações​

useLoading() aprimora funções assíncronas acompanhando seus estados de carregamento e de erro.

import { useLoading, useController } from '@data-client/react';
import { PostResource } from './PostResource';
import PostForm from './PostForm';

export default function PostCreate({ navigateToPost }) {
  const ctrl = useController();
  const [handleSubmit, loading, error] = useLoading(
    async data => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      navigateToPost(post.id);
    },
    [ctrl],
  );
  return (
    <PostForm onSubmit={handleSubmit} loading={loading} error={error} />
  );
}
Resultado
Store▶