next.js 使用trpc.useContext()使数据无效,导致无限循环

nue99wik  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(103)

我有一个问题,使我的数据无效,导致它在循环中不停地运行,看不到原因,为什么它发生或我需要做什么来修复它,因为我仍然是新的trpc。
下面是我使用invalidate的组件:

const ShowUsers = ({ householdId }: ShowUserProps) => {
  const inviteRoute = api.useContext().household;
  
  const getInviteList = api.household.getInviteList.useQuery(
    { householdId },
    {
      onSuccess: () => {
        // void inviteRoute.invalidate(); <-- when uncommented, it runs nonstop
      },
    }
  );

  const deleteInvite = api.invite.deleteInvite.useMutation();

  const { data: sessionData } = useSession();

  return (
    <div>
      <h2>Invited</h2>
      {getInviteList.data &&
        getInviteList.data[0]?.invitedList.map((invite, i) => (
          <div key={i} className="flex gap-3">
            <p>{invite.email}</p>
            {sessionData?.user.role === "ADMIN" && (
              <p onClick={() => deleteInvite.mutate({ email: invite.email })}>
                X
              </p>
            )}
          </div>
        ))}
    </div>
  );
};

下面是在后端使用的trpc函数:

getInviteList: protectedProcedure
    .input(z.object({ householdId: z.string() }))
    .query(async ({ ctx: { prisma }, input }) => {
      const inviteList = await prisma.household.findMany({
        where: {
          householdId: input.householdId,
        },
        select: {

          invitedList: true,
        },
      });

      return inviteList;
    }),

这是被调用来启动无效的函数:

deleteInvite: protectedProcedure
    .input(z.object({ email: z.string() }))
    .mutation(async ({ ctx, input }) => {
      await ctx.prisma.invite.delete({
        where: {
          email: input.email,
        },
      });
    });

除了不间断地运行之外,该函数按预期工作,并在单击邀请后立即将其从列表中删除。
我是否需要以某种方式将失效对象中要删除的特定邀请作为目标?
谢谢!
编辑:我将无效调用更改为

void inviteRoute.getInviteList.invalidate();

以针对特定的路线,但我仍然得到同样的问题。

lyfkaqu1

lyfkaqu11#

我意识到我在错误的函数上运行了无效,我应该在deleteInvite调用的onSuccess上调用它,而不是getInviteList调用。

相关问题