Calling trpc mutations on client components with app router

Hello, looking for some help learning app router, any advice greatly appreciated

I'm getting an error trying to call a mutation from a client component - my aim is to collect some values with a form in a shadcn dialog (so useState required)

Setting up the mutations for create and edit:

import { api } from "~/trpc/react";
export function EpisodeForm({ id }: EpisodeFormProps) {
  const [open, setOpen] = useState(false);

  const utils = api.useUtils();
  const createEpisode = api.episode.create.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  const updateEpisode = api.episode.update.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  ...

import { api } from "~/trpc/react";
export function EpisodeForm({ id }: EpisodeFormProps) {
  const [open, setOpen] = useState(false);

  const utils = api.useUtils();
  const createEpisode = api.episode.create.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  const updateEpisode = api.episode.update.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  ...

import { api } from "~/trpc/react";
export function EpisodeForm({ id }: EpisodeFormProps) {
  const [open, setOpen] = useState(false);

  const utils = api.useUtils();
  const createEpisode = api.episode.create.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  const updateEpisode = api.episode.update.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  ...

import { api } from "~/trpc/react";
export function EpisodeForm({ id }: EpisodeFormProps) {
  const [open, setOpen] = useState(false);

  const utils = api.useUtils();
  const createEpisode = api.episode.create.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  const updateEpisode = api.episode.update.useMutation({
    onSuccess: () => utils.episode.invalidate(),
  });
  ...

Mutating onSubmit function:

async function onSubmit() {
  await form.trigger();
  const errors = Object.keys(form.formState.errors);
  if (errors.length > 0) {
    throw new Error("Form has errors");
  }
  if (!!id) {
    updateEpisode.mutate({
      id,
      ...form.getValues(),
    });
  } else {
    createEpisode.mutate({
      ...form.getValues(),
    });
  }
  form.reset();
}

async function onSubmit() {
  await form.trigger();
  const errors = Object.keys(form.formState.errors);
  if (errors.length > 0) {
    throw new Error("Form has errors");
  }
  if (!!id) {
    updateEpisode.mutate({
      id,
      ...form.getValues(),
    });
  } else {
    createEpisode.mutate({
      ...form.getValues(),
    });
  }
  form.reset();
}

async function onSubmit() {
  await form.trigger();
  const errors = Object.keys(form.formState.errors);
  if (errors.length > 0) {
    throw new Error("Form has errors");
  }
  if (!!id) {
    updateEpisode.mutate({
      id,
      ...form.getValues(),
    });
  } else {
    createEpisode.mutate({
      ...form.getValues(),
    });
  }
  form.reset();
}

async function onSubmit() {
  await form.trigger();
  const errors = Object.keys(form.formState.errors);
  if (errors.length > 0) {
    throw new Error("Form has errors");
  }
  if (!!id) {
    updateEpisode.mutate({
      id,
      ...form.getValues(),
    });
  } else {
    createEpisode.mutate({
      ...form.getValues(),
    });
  }
  form.reset();
}

Specific error is in the screenshot, I assume I'm just doing the client component trpc pattern wrong, but not really sure what a correct call would look like

Solution

https://github.com/hyhydev/Modulation/compare/main...varugasu:Modulation:patch-1

GitHub

Comparing hyhydev:main...varugasu:patch-1 · hyhydev/Modulation

Modulation Podcast Website. Contribute to hyhydev/Modulation development by creating an account on GitHub.

Jump to solution

Calling trpc mutations on client components with app router

Similar Threads

Similar Threads

Similar Threads