Trongar Posts

Trongar

•Created by Trongar on 9/20/2023 in #❓-help

Optimizing Data Refresh with trpc in React/Nextjs? Is there a more efficient way?

I'm working on a Nextjs project using trpc, and I've noticed that I'm repeating the same code for data refetching after mutations (add, update, delete) using trpc mutations. Is there a more efficient or DRY (Don't Repeat Yourself) approach to handle data refreshing after mutations with trpc in React? I'd appreciate any suggestions or best practices to optimize this process.

  const addTask = trpcClient.tasks.addTask.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });
  const setDone = trpcClient.tasks.setTaskStatus.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });

  const deleteTask = trpcClient.tasks.deleteTask.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });

  const addTask = trpcClient.tasks.addTask.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });
  const setDone = trpcClient.tasks.setTaskStatus.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });

  const deleteTask = trpcClient.tasks.deleteTask.useMutation({
    onSettled: () => {
      getTasks.refetch();
    },
  });

5 replies