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 :

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>
  )
}

Does someone already achieve something like this ?

1 Reply

Mattèo•8mo ago

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>
  )
}