Mattèo
Mattèo
Explore posts from servers
RRailwayTtRPCPPrismaTTCTheo's Typesafe CultKKinde
PostsComments
TtRPC
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