How to create a React Component that fetch API based on a router from props ?
I want to pass in my React component props the name of the router to use, here is my current implementation :
Does someone already achieve something like this ?
export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
const router = useRouter()
const deleteMutation = api[model].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 (
// Error here : Type '[]' has no properties in common with type...
<Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
Delete
</Button>
)
}
export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
const router = useRouter()
const deleteMutation = api[model].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 (
// Error here : Type '[]' has no properties in common with type...
<Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
Delete
</Button>
)
}
1 Reply
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>
)
}