Mattèo Comments

Mattèo

•Created by Mattèo on 12/9/2023 in #❓-help

How to create a React Component that fetch API based on a router from props ?

I also tried something like this but It's throwing the same TS error

export const RowActionDeleteButton = ({
  id,
  trpcRouter,
}: {
  id: string
  trpcRouter: RouterLike<AppRouter["module"]> | RouterLike<AppRouter["lesson"]>
}) => {
  const router = useRouter()

  const deleteMutation = trpcRouter.delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}

export const RowActionDeleteButton = ({
  id,
  trpcRouter,
}: {
  id: string
  trpcRouter: RouterLike<AppRouter["module"]> | RouterLike<AppRouter["lesson"]>
}) => {
  const router = useRouter()

  const deleteMutation = trpcRouter.delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}

3 replies