Type '[]' has no properties in common with type 'MutateOptions<{ id: string....

Is it possible to get this to work? i am trying to make a single action that works across 2 routers.

const DeleteMedia = ({
  id,
  router,
}: {
  id: string
  router: keyof Pick<AppRouter, 'movieRouter' | 'serieRouter'>
}) => {
  const { refresh } = useRouter()
  const utils = api.useUtils()
  const deleteMedia = api[router].delete.useMutation({
    onSuccess: async (m) => {
      toast.success('Media Removed', { description: m.title })
      utils[router].list.invalidate()
      refresh()
    },
    onError: (error) => toast.error(error.message),
  })
  return (
    <form action={() => deleteMedia.mutate({ id })}> // Error here over deleteMedia
      <Button size="card" variant="card" type="submit">
        <XCircleIcon />
        Remove
      </Button>
    </form>
  )
}

const DeleteMedia = ({
  id,
  router,
}: {
  id: string
  router: keyof Pick<AppRouter, 'movieRouter' | 'serieRouter'>
}) => {
  const { refresh } = useRouter()
  const utils = api.useUtils()
  const deleteMedia = api[router].delete.useMutation({
    onSuccess: async (m) => {
      toast.success('Media Removed', { description: m.title })
      utils[router].list.invalidate()
      refresh()
    },
    onError: (error) => toast.error(error.message),
  })
  return (
    <form action={() => deleteMedia.mutate({ id })}> // Error here over deleteMedia
      <Button size="card" variant="card" type="submit">
        <XCircleIcon />
        Remove
      </Button>
    </form>
  )
}

1 Reply

BillyBob•5mo ago

ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'

ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'