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.

<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { TodoResource, type Todo } from './TodoResource';

  const props = defineProps<{ todo: Todo }>();
  const ctrl = useController();

  const handleChange = (e: Event) =>
    ctrl.fetch(
      TodoResource.partialUpdate,
      { id: props.todo.id },
      { completed: (e.target as HTMLInputElement).checked },
    );
  const handleDelete = () =>
    ctrl.fetch(TodoResource.delete, {
      id: props.todo.id,
    });
</script>

<template>
  <div class="listItem nogap">
    <label>
      <input
        type="checkbox"
        :checked="todo.completed"
        @change="handleChange"
      />
      <s v-if="todo.completed">{{ todo.title }}</s>
      <template v-else>{{ todo.title }}</template>
    </label>
    <CancelButton @click="handleDelete" />
  </div>
</template>

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,
    };
  },
});

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.

<script setup lang="ts">
  import { useLoading, useController } from '@data-client/vue';
  import { PostResource } from './PostResource';
  import PostForm from './PostForm.vue';

  const emit = defineEmits<{ navigateToPost: [id: number] }>();
  const ctrl = useController();

  const [handleSubmit, loading, error] = useLoading(
    async (data: FormData) => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      emit('navigateToPost', post.id);
    },
  );
</script>

<template>
  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
</template>