TanStackT
TanStack•8mo ago
correct-teal

Tanstack with next server action

Hey everyone!
I’m using TanStack Query + Next.js and want to make sure I’m doing this the best way.

Here’s what I’m doing:

✅ I have a server action like:
'use server';
export async function createContentSubmission(formData) {
  // validate + write to Prisma DB
}

✅ On the client side, I call it using:
const { mutate, isPending } = useMutation({
  mutationFn: async (contentId) => {
    const formData = new FormData();
    formData.append('contentId', contentId);
    await createContentSubmission(formData);
  },
  onSuccess: () => router.push(`${pathname}/content`),
  onError: (error) => toast.error(error.message),
});

And trigger it with a button:
<Button onClick={() => mutate(contentId)} disabled={isPending}>
  Start now
</Button>

🔧 My questions:
✅ Is this the right or best practice way to call server actions in a client component?
✅ Any tips for better error handling or optimistic updates here?
Was this page helpful?