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
}

'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?

TanStack•10mo 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
}

'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?

Tanstack with next server action

Similar Threads

Tanstack with next server action

Similar Threads

Similar Threads

Similar Threads