T
TanStack•7mo ago
national-gold

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
}
'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),
});
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>
<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?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?