أمان الأنواع، من العقد إلى الواجهة.

import { Controller, Inject } from '@nestjs/common'
import { Implement, implement } from '@orpc/nest'
import { contract } from '@repo/api-contract'
import { CustomersService } from './customers.service'

@Controller()
export class CustomersController {
  constructor(
    @Inject(CustomersService) private readonly customers: CustomersService,
  ) {}

  @Implement(contract.customers)
  customersRoutes() {
    return {
      list: implement(contract.customers.list).handler(({ input }) =>
        this.customers.list(input),
      ),
    }
  }
}

import { createORPCClient } from '@orpc/client'
import type { ContractRouterClient } from '@orpc/contract'
import type { JsonifiedClient } from '@orpc/openapi-client'
import { OpenAPILink } from '@orpc/openapi-client/fetch'
import { contract } from '@repo/api-contract'

export type ApiClient = JsonifiedClient<ContractRouterClient<typeof contract>>

export default defineNuxtPlugin(() => {
  const link = new OpenAPILink(contract, {
    url: useRuntimeConfig().public.apiUrl,
  })
  const api: ApiClient = createORPCClient(link)

  return { provide: { api } }
})

<script setup lang="ts">
const { $api } = useNuxtApp()

const { data: customers } = await useAsyncData('customers', () =>
  $api.customers.list({ status: 'active' }),
)
</script>

<template>
  <ul>
    <li v-for="customer in customers" :key="customer.id">
      <strong>{{ customer.name }}</strong>
      <span>{{ customer.email }}</span>
    </li>
  </ul>
</template>