Mattèo
Mattèo
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