如何在 TRPC 中使查询无效并获取最新数据？

Question

我只是想在执行突变后从服务器获取最新数据。我的代码看起来像这样：

  const utils = trpc.useContext()
  const markAsUnreadMutation = trpc.useMutation(['update-mark-as-unread'], {
    onSuccess() {
      utils.invalidateQueries() //THIS IS NOT WORKING!
    },
    onError(data) {
      toast({
        type: 'error',
        message: data.message,
      })
    },
  })

  function markAsUnread(isUnread: boolean) {
    markAsUnreadMutation.mutate({
      id: parseInt(channel.id),
      markAsUnread: isUnread,
    })
  }

Answer 1

使单个查询无效

您可以使与单个过程相关的查询无效，甚至可以根据传递给它的输入进行过滤，以防止对后端进行不必要的调用。

import { trpc } from '../utils/trpc';

function MyComponent() {
  const utils = trpc.useContext();

  const mutation = trpc.post.edit.useMutation({
    onSuccess(input) {
      utils.post.all.invalidate();
      utils.post.byId.invalidate({ id: input.id }); // Will not invalidate queries for other id's 
    },
  });

  // [...]
}