========================
CODE SNIPPETS
========================
TITLE: Install oRPC with deno
DESCRIPTION: Installs the latest versions of the oRPC server and client packages using deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_4

LANGUAGE: bash
CODE:
```
deno add npm:@orpc/server@latest npm:@orpc/client@latest
```

----------------------------------------

TITLE: Install oRPC with bun
DESCRIPTION: Installs the latest versions of the oRPC server and client packages using bun.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_3

LANGUAGE: bash
CODE:
```
bun add @orpc/server@latest @orpc/client@latest
```

----------------------------------------

TITLE: Install oRPC with pnpm
DESCRIPTION: Installs the latest versions of the oRPC server and client packages using pnpm.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_2

LANGUAGE: bash
CODE:
```
pnpm add @orpc/server@latest @orpc/client@latest
```

----------------------------------------

TITLE: Install oRPC with npm
DESCRIPTION: Installs the latest versions of the oRPC server and client packages using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @orpc/server@latest @orpc/client@latest
```

----------------------------------------

TITLE: Install oRPC with yarn
DESCRIPTION: Installs the latest versions of the oRPC server and client packages using yarn.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_1

LANGUAGE: bash
CODE:
```
yarn add @orpc/server@latest @orpc/client@latest
```

----------------------------------------

TITLE: Install oRPC Packages
DESCRIPTION: Installs the latest versions of oRPC server, client, and OpenAPI packages using different package managers like npm, yarn, pnpm, and bun. Also includes installation for Deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/getting-started.md#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @orpc/server@latest @orpc/client@latest @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/server@latest @orpc/client@latest @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/server@latest @orpc/client@latest @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/server@latest @orpc/client@latest @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/server@latest npm:@orpc/client@latest npm:@orpc/openapi@latest
```

----------------------------------------

TITLE: Create oRPC Client
DESCRIPTION: Initializes an oRPC client using a fetch-based link, configuring the server URL and authorization headers.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_7

LANGUAGE: typescript
CODE:
```
import { router } from './shared/planet'
// ---cut---
import type { RouterClient } from '@orpc/server'
import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch'

const link = new RPCLink({
  url: 'http://127.0.0.1:3000',
  headers: { Authorization: 'Bearer token' },
})

export const orpc: RouterClient<typeof router> = createORPCClient(link)

```

----------------------------------------

TITLE: Call oRPC Procedure
DESCRIPTION: Demonstrates calling a 'find' procedure on the oRPC client with type-safe auto-completion.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_8

LANGUAGE: typescript
CODE:
```
import { orpc } from './shared/planet'
// ---cut---
const planet = await orpc.planet.find({ id: 1 })

orpc.planet.create
//          ^|

```

----------------------------------------

TITLE: Create oRPC Server with Node.js
DESCRIPTION: Sets up an HTTP server using Node.js to handle oRPC requests, including CORS handling via a plugin.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_6

LANGUAGE: typescript
CODE:
```
import { router } from './shared/planet'
// ---cut---
import { createServer } from 'node:http'
import { RPCHandler } from '@orpc/server/node'
import { CORSPlugin } from '@orpc/server/plugins'

const handler = new RPCHandler(router, {
  plugins: [new CORSPlugin()]
})

const server = createServer(async (req, res) => {
  const result = await handler.handle(req, res, {
    context: { headers: req.headers }
  })

  if (!result.matched) {
    res.statusCode = 404
    res.end('No procedure matched')
  }
})

server.listen(
  3000,
  '127.0.0.1',
  () => console.log('Listening on 127.0.0.1:3000')
)

```

----------------------------------------

TITLE: Access oRPC APIs via cURL
DESCRIPTION: Demonstrates how to access the defined oRPC API endpoints using cURL commands. Includes examples for GET requests to list and find planets, and a POST request to create a planet with authorization headers.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/getting-started.md#_snippet_3

LANGUAGE: bash
CODE:
```
curl -X GET http://127.0.0.1:3000/planets
curl -X GET http://127.0.0.1:3000/planets/1
curl -X POST http://127.0.0.1:3000/planets \
  -H 'Authorization: Bearer token' \
  -H 'Content-Type: application/json' \
  -d '{"name": "name"}'
```

----------------------------------------

TITLE: Setup and Run oRPC Playground Locally
DESCRIPTION: After cloning an oRPC playground project, these commands are used to install the necessary dependencies and start the local development server. The playground will then be accessible at `http://localhost:3000`.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/playgrounds.md#_snippet_1

LANGUAGE: bash
CODE:
```
# Install dependencies
npm install

# Start the development server
npm run dev
```

----------------------------------------

TITLE: Define oRPC Procedures with Zod
DESCRIPTION: Defines RPC procedures for listing, finding, and creating planets using Zod for schema validation and context handling for authorization.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/getting-started.md#_snippet_5

LANGUAGE: typescript
CODE:
```
import type { IncomingHttpHeaders } from 'node:http'
import { ORPCError, os } from '@orpc/server'
import * as z from 'zod'

const PlanetSchema = z.object({
  id: z.number().int().min(1),
  name: z.string(),
  description: z.string().optional(),
})

export const listPlanet = os
  .input(
    z.object({
      limit: z.number().int().min(1).max(100).optional(),
      cursor: z.number().int().min(0).default(0),
    }),
  )
  .handler(async ({ input }) => {
    // your list code here
    return [{ id: 1, name: 'name' }]
  })

export const findPlanet = os
  .input(PlanetSchema.pick({ id: true }))
  .handler(async ({ input }) => {
    // your find code here
    return { id: 1, name: 'name' }
  })

export const createPlanet = os
  .$context<{ headers: IncomingHttpHeaders }>()
  .use(({ context, next }) => {
    const user = parseJWT(context.headers.authorization?.split(' ')[1])

    if (user) {
      return next({ context: { user } })
    }

    throw new ORPCError('UNAUTHORIZED')
  })
  .input(PlanetSchema.omit({ id: true }))
  .handler(async ({ input, context }) => {
    // your create code here
    return { id: 1, name: 'name' }
  })

export const router = {
  planet: {
    list: listPlanet,
    find: findPlanet,
    create: createPlanet
  }
}
// ---cut-after---

declare function parseJWT(token: string | undefined): { userId: number } | null

```

----------------------------------------

TITLE: Define OpenAPI Routes with oRPC
DESCRIPTION: Defines various OpenAPI-compliant routes for managing planets using oRPC. Includes GET, POST methods, input validation with Zod, and context handling for authorization.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/getting-started.md#_snippet_1

LANGUAGE: ts
CODE:
```
import type { IncomingHttpHeaders } from 'node:http'
import { ORPCError, os } from '@orpc/server'
import * as z from 'zod'

const PlanetSchema = z.object({
  id: z.number().int().min(1),
  name: z.string(),
  description: z.string().optional(),
})

export const listPlanet = os
  .route({ method: 'GET', path: '/planets' })
  .input(z.object({
    limit: z.number().int().min(1).max(100).optional(),
    cursor: z.number().int().min(0).default(0),
  }))
  .output(z.array(PlanetSchema))
  .handler(async ({ input }) => {
    // your list code here
    return [{ id: 1, name: 'name' }]
  })

export const findPlanet = os
  .route({ method: 'GET', path: '/planets/{id}' })
  .input(z.object({ id: z.coerce.number().int().min(1) }))
  .output(PlanetSchema)
  .handler(async ({ input }) => {
    // your find code here
    return { id: 1, name: 'name' }
  })

export const createPlanet = os
  .$context<{ headers: IncomingHttpHeaders }>()
  .use(({ context, next }) => {
    const user = parseJWT(context.headers.authorization?.split(' ')[1])

    if (user) {
      return next({ context: { user } })
    }

    throw new ORPCError('UNAUTHORIZED')
  })
  .route({ method: 'POST', path: '/planets' })
  .input(PlanetSchema.omit({ id: true }))
  .output(PlanetSchema)
  .handler(async ({ input, context }) => {
    // your create code here
    return { id: 1, name: 'name' }
  })

export const router = {
  planet: {
    list: listPlanet,
    find: findPlanet,
    create: createPlanet
  }
}
// ---cut-after---

declare function parseJWT(token: string | undefined): { userId: number } | null

```

----------------------------------------

TITLE: Start ORPC Development Server
DESCRIPTION: This command starts the development server for the ORPC and Solid Start playground. It allows you to run the project locally and view the application in your browser.

SOURCE: https://github.com/unnoq/orpc/blob/main/playgrounds/solid-start/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm run dev
```

----------------------------------------

TITLE: Run Development Server (Bash)
DESCRIPTION: This snippet shows the command to start the development server for the ORPC Playground using npm. It's a common first step for users to get the application running locally.

SOURCE: https://github.com/unnoq/orpc/blob/main/playgrounds/tanstack-start/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm run dev
```

----------------------------------------

TITLE: Basic H3 Adapter Setup
DESCRIPTION: Demonstrates the basic setup for using the oRPC handler within an H3 application. It initializes an H3 server, creates an RPCHandler, and defines a route to handle incoming RPC requests. The example shows how to pass the request to the oRPC handler and return the response.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/h3.md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { H3, serve } from 'h3'
import { RPCHandler } from '@orpc/server/fetch'

const app = new H3()

const handler = new RPCHandler(router)

app.use('/rpc/**', async (event) => {
  const { matched, response } = await handler.handle(event.req, {
    prefix: '/rpc',
    context: {} // Provide initial context if needed
  })

  if (matched) {
    return response
  }
})

serve(app, { port: 3000 })
```

----------------------------------------

TITLE: Install and Use Published oRPC Client
DESCRIPTION: Instructions to install the published oRPC client using 'pnpm add "<package-name>"' and an example of how to import and use the client to make API calls.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/advanced/publish-client-to-npm.md#_snippet_3

LANGUAGE: bash
CODE:
```
pnpm add "<package-name>"
```

LANGUAGE: javascript
CODE:
```
import { createMyApi } from '<package-name>'

const myApi = createMyApi('your-api-key')

const output = await myApi.someMethod('input')
```

----------------------------------------

TITLE: Create an OpenAPI Server with oRPC
DESCRIPTION: Sets up an HTTP server using Node.js and oRPC's OpenAPIHandler to handle incoming requests. It includes CORS plugin for cross-origin requests and defines a handler for the defined routes.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/getting-started.md#_snippet_2

LANGUAGE: ts
CODE:
```
import { router } from './shared/planet'
// ---cut---
import { createServer } from 'node:http'
import { OpenAPIHandler } from '@orpc/openapi/node'
import { CORSPlugin } from '@orpc/server/plugins'

const handler = new OpenAPIHandler(router, {
  plugins: [new CORSPlugin()]
})

const server = createServer(async (req, res) => {
  const result = await handler.handle(req, res, {
    context: { headers: req.headers }
  })

  if (!result.matched) {
    res.statusCode = 404
    res.end('No procedure matched')
  }
})

server.listen(
  3000,
  '127.0.0.1',
  () => console.log('Listening on 127.0.0.1:3000')
)
```

----------------------------------------

TITLE: Install @orpc/experimental-react-swr
DESCRIPTION: This command installs the integration for SWR with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_9

LANGUAGE: bash
CODE:
```
npm install @orpc/experimental-react-swr
```

----------------------------------------

TITLE: Install @orpc/server
DESCRIPTION: This command installs the package for building your API or implementing an API contract using oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm install @orpc/server
```

----------------------------------------

TITLE: Setup RPCHandler with Strict GET Method Plugin
DESCRIPTION: This code illustrates how to set up the `RPCHandler` with the `StrictGetMethodPlugin`. It shows the import of necessary components and the instantiation of the plugin within the handler's configuration, enabling the security feature for RPC requests.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/plugins/strict-get-method.md#_snippet_1

LANGUAGE: ts
CODE:
```
import { RPCHandler } from '@orpc/server/fetch'
import { router } from './shared/planet'
// ---
import { StrictGetMethodPlugin } from '@orpc/server/plugins'

const handler = new RPCHandler(router, {
  plugins: [
    new StrictGetMethodPlugin()
  ],
})
```

----------------------------------------

TITLE: Install @orpc/contract
DESCRIPTION: This command installs the package for building your API contract with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
npm install @orpc/contract
```

----------------------------------------

TITLE: Install @orpc/standard-server-node
DESCRIPTION: This command installs the Node.js server adapter for oRPC, which is used to build API servers.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @orpc/standard-server-node
```

----------------------------------------

TITLE: TanStack Start oRPC Client Link Configuration
DESCRIPTION: Sets up an oRPC client link for TanStack Start, utilizing `createIsomorphicFn` to provide environment-specific configurations for both browser and server-side rendering. This ensures the RPC client is correctly initialized regardless of the execution environment.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/tanstack-start.md#_snippet_1

LANGUAGE: typescript
CODE:
```
import { RPCLink } from '@orpc/client/fetch'
import { createIsomorphicFn } from '@tanstack/react-start'
import { getHeaders } from '@tanstack/react-start/server'

const getClientLink = createIsomorphicFn()
  .client(() => new RPCLink({
    url: `${window.location.origin}/api/rpc`,
  }))
  .server(() => new RPCLink({
    url: 'http://localhost:3000/api/rpc',
    headers: () => getHeaders(),
  }))
```

----------------------------------------

TITLE: Install @orpc/hey-api
DESCRIPTION: This command installs the integration for Hey API with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_11

LANGUAGE: bash
CODE:
```
npm install @orpc/hey-api
```

----------------------------------------

TITLE: Start Development Server (npm)
DESCRIPTION: This snippet shows how to start the development server for the ORPC playground using npm. It's a common command for running local development environments.

SOURCE: https://github.com/unnoq/orpc/blob/main/playgrounds/cloudflare-worker/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm run dev
```

----------------------------------------

TITLE: Install @orpc/client
DESCRIPTION: Install the @orpc/client package using various package managers like npm, yarn, pnpm, bun, or deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/client/client-side.md#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @orpc/client@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/client@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/client@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/client@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/client@latest
```

----------------------------------------

TITLE: TanStack Start oRPC Server Route
DESCRIPTION: Configures an oRPC server within a TanStack Start project's server routes. It uses `RPCHandler` to manage incoming requests and integrates with TanStack Start's `createServerFileRoute` for handling various HTTP methods.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/tanstack-start.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { RPCHandler } from '@orpc/server/fetch'
import { createServerFileRoute } from '@tanstack/react-start/server'

const handler = new RPCHandler(router)

async function handle({ request }: { request: Request }) {
  const { response } = await handler.handle(request, {
    prefix: '/api/rpc',
    context: {},
  })

  return response ?? new Response('Not Found', { status: 404 })
}

export const ServerRoute = createServerFileRoute('/api/rpc/$').methods({
  HEAD: handle,
  GET: handle,
  POST: handle,
  PUT: handle,
  PATCH: handle,
  DELETE: handle,
})
```

----------------------------------------

TITLE: Solid Start Server RPC Handler
DESCRIPTION: Sets up the oRPC handler for Solid Start server routes, enabling RPC calls via HTTP methods. It uses RPCHandler from '@orpc/server/fetch' and exports handlers for all HTTP methods.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/solid-start.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import type { APIEvent } from '@solidjs/start/server'
import { RPCHandler } from '@orpc/server/fetch'

const handler = new RPCHandler(router)

async function handle({ request }: APIEvent) {
  const { response } = await handler.handle(request, {
    prefix: '/rpc',
    context: {} // Provide initial context if needed
  })

  return response ?? new Response('Not Found', { status: 404 })
}

export const HEAD = handle
export const GET = handle
export const POST = handle
export const PUT = handle
export const PATCH = handle
export const DELETE = handle
```

LANGUAGE: typescript
CODE:
```
import { POST as handle } from './[...rest]'

export const HEAD = handle
export const GET = handle
export const POST = handle
export const PUT = handle
export const PATCH = handle
export const DELETE = handle
```

----------------------------------------

TITLE: Clone oRPC Playgrounds Locally with degit
DESCRIPTION: These commands use `degit` to clone specific oRPC playground projects from GitHub to your local machine. After cloning, you can set up the development environment by installing dependencies and starting the development server.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/playgrounds.md#_snippet_0

LANGUAGE: bash
CODE:
```
npx degit unnoq/orpc/playgrounds/next orpc-next-playground
npx degit unnoq/orpc/playgrounds/tanstack-start orpc-tanstack-start-playground
npx degit unnoq/orpc/playgrounds/nuxt orpc-nuxt-playground
npx degit unnoq/orpc/playgrounds/solid-start orpc-solid-start-playground
npx degit unnoq/orpc/playgrounds/svelte-kit orpc-svelte-kit-playground
npx degit unnoq/orpc/playgrounds/astro orpc-astro-playground
npx degit unnoq/orpc/playgrounds/contract-first orpc-contract-first-playground
npx degit unnoq/orpc/playgrounds/nest orpc-nest-playground
npx degit unnoq/orpc/playgrounds/cloudflare-worker orpc-cloudflare-worker-playground
npx degit unnoq/orpc/playgrounds/bun-websocket-otel orpc-bun-websocket-otel-playground
npx degit unnoq/orpc/playgrounds/electron orpc-electron-playground
npx degit unnoq/orpc/playgrounds/browser-extension orpc-browser-extension-playground
```

----------------------------------------

TITLE: Install @orpc/server
DESCRIPTION: This command installs the @orpc/server package, which is used for building oRPC APIs or implementing API contracts. It is typically installed via npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm install @orpc/server
```

----------------------------------------

TITLE: Install @orpc/otel
DESCRIPTION: This command installs the OpenTelemetry integration for oRPC, enabling observability.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_5

LANGUAGE: bash
CODE:
```
npm install @orpc/otel
```

----------------------------------------

TITLE: Install @orpc/react Package
DESCRIPTION: Provides commands for installing the `@orpc/react` package using various package managers including npm, yarn, pnpm, bun, and deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/server-action.md#_snippet_3

LANGUAGE: sh
CODE:
```
npm install @orpc/react@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/react@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/react@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/react@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/react@latest
```

----------------------------------------

TITLE: Install @orpc/client
DESCRIPTION: This command installs the package for consuming your API on the client-side with type-safety using oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
npm install @orpc/client
```

----------------------------------------

TITLE: Install @orpc/tanstack-query
DESCRIPTION: This command installs the integration for TanStack Query with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_8

LANGUAGE: bash
CODE:
```
npm install @orpc/tanstack-query
```

----------------------------------------

TITLE: tRPC TanStack Query Integration Example
DESCRIPTION: Provides an example of TanStack Query integration using tRPC for comparison. It illustrates the setup and usage of queries, infinite queries, and mutations with tRPC in React components.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/migrations/from-trpc.md#_snippet_9

LANGUAGE: typescript
CODE:
```
import { createTRPCContext } from '@trpc/tanstack-react-query'

export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<typeof appRouter>()

// ---------------- Usage in React Components ----------------

const trpc = useTRPC()

const query = useQuery(trpc.planet.list.queryOptions({ cursor: 0 }))

const infinite = useInfiniteQuery(trpc.planet.list.infiniteQueryOptions(
  {},
  {
    initialCursor: 0,
    getNextPageParam: lastPage => lastPage.nextCursor,
  }
))

const mutation = useMutation(trpc.planet.create.mutationOptions())

```

----------------------------------------

TITLE: Solid Start Optimized SSR Client
DESCRIPTION: Optimizes SSR performance in Solid Start by using a server-side oRPC client. It includes logic to import a server-specific file and provides a fallback to a client-side client if the server-side one is unavailable.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/solid-start.md#_snippet_2

LANGUAGE: typescript
CODE:
```
if (typeof window === 'undefined') {
  await import('./orpc.server')
}

import type { RouterClient } from '@orpc/server'
import { RPCLink } from '@orpc/client/fetch'
import { createORPCClient } from '@orpc/client'

declare global {
  var $client: RouterClient<typeof router> | undefined
}

const link = new RPCLink({
  url: () => {
    if (typeof window === 'undefined') {
      throw new Error('RPCLink is not allowed on the server side.')
    }

    return `${window.location.origin}/rpc`
  },
})

/**
 * Fallback to client-side client if server-side client is not available.
 */
export const client: RouterClient<typeof router> = globalThis.$client ?? createORPCClient(link)
```

LANGUAGE: typescript
CODE:
```
import { createRouterClient } from '@orpc/server'
import { getRequestEvent } from 'solid-js/web'

if (typeof window !== 'undefined') {
  throw new Error('This file should not be imported in the browser')
}

globalThis.$client = createRouterClient(router, {
  /**
   * Provide initial context if needed.
   *
   * Because this client instance is shared across all requests,
   * only include context that's safe to reuse globally.
   * For per-request context, use middleware context or pass a function as the initial context.
   */
  context: async () => {
    const headers = getRequestEvent()?.request.headers

    return {
      headers, // provide headers if initial context required
    }
  },
})
```

----------------------------------------

TITLE: Install @orpc/server
DESCRIPTION: This command installs the @orpc/server package, used for building the API server or implementing the API contract defined with oRPC. It's essential for the backend implementation of your oRPC services.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm install @orpc/server
```

----------------------------------------

TITLE: React Native oRPC Client Setup
DESCRIPTION: Demonstrates how to initialize the RPCLink for oRPC client communication in a React Native environment. It specifies the server URL and includes an example of how to dynamically add headers, such as an API key, using context.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/react-native.md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { RPCLink } from '@orpc/client/fetch'

const link = new RPCLink({
  url: 'http://localhost:3000/rpc',
  headers: async ({ context }) => ({
    'x-api-key': context?.something ?? ''
  })
  // fetch: <-- polyfill fetch if needed
})
```

----------------------------------------

TITLE: Install @orpc/client
DESCRIPTION: This snippet shows the command to install the @orpc/client package, used for consuming oRPC APIs on the client-side with type-safety. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
npm install @orpc/client
```

----------------------------------------

TITLE: Install @orpc/openapi
DESCRIPTION: This command installs the package for generating OpenAPI specs and handling OpenAPI requests with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_4

LANGUAGE: bash
CODE:
```
npm install @orpc/openapi
```

----------------------------------------

TITLE: Install @orpc/otel
DESCRIPTION: This snippet shows how to install the @orpc/otel package for OpenTelemetry integration with oRPC, enhancing observability. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_5

LANGUAGE: bash
CODE:
```
npm install @orpc/otel
```

----------------------------------------

TITLE: Install @orpc/contract
DESCRIPTION: This snippet demonstrates how to install the @orpc/contract package, used for building API contracts with oRPC. It is commonly installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
npm install @orpc/contract
```

----------------------------------------

TITLE: Install @orpc/valibot
DESCRIPTION: This command installs the package for OpenAPI spec generation from Valibot with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_13

LANGUAGE: bash
CODE:
```
npm install @orpc/valibot
```

----------------------------------------

TITLE: Solid Start Client RPC Link
DESCRIPTION: Configures the oRPC client link for Solid Start applications, utilizing getRequestEvent for SSR compatibility. This allows the client to fetch data seamlessly in both server and browser environments.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/solid-start.md#_snippet_1

LANGUAGE: typescript
CODE:
```
import { RPCLink } from '@orpc/client/fetch'
import { getRequestEvent } from 'solid-js/web'

const link = new RPCLink({
  url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
  headers: () => getRequestEvent()?.request.headers ?? {},
})
```

----------------------------------------

TITLE: Install @orpc/server
DESCRIPTION: This command installs the @orpc/server package, used for building the API server or implementing the API contract defined with oRPC. It's essential for the backend implementation of your API.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/vue-query/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm install @orpc/server
```

----------------------------------------

TITLE: Install @orpc/tanstack-query
DESCRIPTION: This command installs the @orpc/tanstack-query package for integrating oRPC with TanStack Query, facilitating efficient data fetching and state management. It is installed via npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_8

LANGUAGE: bash
CODE:
```
npm install @orpc/tanstack-query
```

----------------------------------------

TITLE: Full oRPC Contract Implementation Example
DESCRIPTION: Provides a complete example of implementing an oRPC contract, including defining multiple procedures (list, find, create) with their respective handlers and assembling them into a router. This demonstrates the end-to-end process.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/contract-first/implement-contract.md#_snippet_4

LANGUAGE: ts
CODE:
```
import { contract } from './shared/planet'
import { implement } from '@orpc/server'

const os = implement(contract)

export const listPlanet = os.planet.list
  .handler(({ input }) => {
    return []
  })

export const findPlanet = os.planet.find
  .handler(({ input }) => {
    return { id: 123, name: 'Planet X' }
  })

export const createPlanet = os.planet.create
  .handler(({ input }) => {
    return { id: 123, name: 'Planet X' }
  })

export const router = os.router({
  planet: {
    list: listPlanet,
    find: findPlanet,
    create: createPlanet,
  },
})
```

----------------------------------------

TITLE: Install @orpc/valibot
DESCRIPTION: This command installs the @orpc/valibot package for generating OpenAPI specifications from Valibot schemas within the oRPC framework. It is installed via npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_12

LANGUAGE: bash
CODE:
```
npm install @orpc/valibot
```

----------------------------------------

TITLE: Install @orpc/experimental-react-swr
DESCRIPTION: This snippet shows how to install the @orpc/experimental-react-swr package for integrating oRPC with SWR, a React Hooks library for data fetching. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_9

LANGUAGE: bash
CODE:
```
npm install @orpc/experimental-react-swr
```

----------------------------------------

TITLE: Install @orpc/openapi
DESCRIPTION: This command installs the @orpc/openapi package, which is used for generating OpenAPI specs and handling OpenAPI requests within the oRPC ecosystem. It is installed via npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_4

LANGUAGE: bash
CODE:
```
npm install @orpc/openapi
```

----------------------------------------

TITLE: Install @orpc/zod
DESCRIPTION: This command installs additional schemas for oRPC that Zod doesn't support yet.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_12

LANGUAGE: bash
CODE:
```
npm install @orpc/zod
```

----------------------------------------

TITLE: Install @orpc/openapi
DESCRIPTION: This command installs the @orpc/openapi package, which is used for generating OpenAPI specifications and handling OpenAPI requests. It facilitates interoperability and documentation of your API.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_4

LANGUAGE: bash
CODE:
```
npm install @orpc/openapi
```

----------------------------------------

TITLE: Install @orpc/nest
DESCRIPTION: This command installs the package for deep integration of oRPC with NestJS.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_6

LANGUAGE: bash
CODE:
```
npm install @orpc/nest
```

----------------------------------------

TITLE: Install @orpc/nest
DESCRIPTION: This command installs the @orpc/nest package, enabling deep integration of oRPC with NestJS applications. It is installed via npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_6

LANGUAGE: bash
CODE:
```
npm install @orpc/nest
```

----------------------------------------

TITLE: Install @orpc/zod
DESCRIPTION: This snippet shows how to install the @orpc/zod package, which provides additional schemas for oRPC that are not yet supported by Zod. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_11

LANGUAGE: bash
CODE:
```
npm install @orpc/zod
```

----------------------------------------

TITLE: Install @orpc/arktype
DESCRIPTION: This snippet shows how to install the @orpc/arktype package, used for generating OpenAPI specifications from ArkType schemas with oRPC. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_13

LANGUAGE: bash
CODE:
```
npm install @orpc/arktype
```

----------------------------------------

TITLE: Install @orpc/react
DESCRIPTION: This snippet shows how to install the @orpc/react package, which provides utilities for integrating oRPC with React and React Server Actions. It is installed using npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_7

LANGUAGE: bash
CODE:
```
npm install @orpc/react
```

----------------------------------------

TITLE: Install oRPC Server Package
DESCRIPTION: Installs the latest version of the oRPC server package using various package managers like npm, yarn, pnpm, bun, and deno. This is the first step to setting up your oRPC server.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/contract-first/implement-contract.md#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @orpc/server@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/server@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/server@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/server@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/server@latest
```

----------------------------------------

TITLE: Install @orpc/hey-api
DESCRIPTION: This snippet shows how to install the @orpc/hey-api package, which provides integration with Hey API. It is typically used with npm.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/hey-api/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @orpc/hey-api
```

----------------------------------------

TITLE: Install oRPC OpenAPI
DESCRIPTION: Install the oRPC OpenAPI package using various package managers like npm, yarn, pnpm, bun, and deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/openapi-specification.md#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/openapi@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/openapi@latest
```

----------------------------------------

TITLE: Install @orpc/client
DESCRIPTION: This command installs the @orpc/client package, which enables consuming your API on the client-side with type-safety. It's crucial for frontend applications interacting with an oRPC backend.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
npm install @orpc/client
```

----------------------------------------

TITLE: Run Development Server with Bun
DESCRIPTION: Commands to start the development server using Bun. This typically involves running the OpenTelemetry collector and the main development application.

SOURCE: https://github.com/unnoq/orpc/blob/main/playgrounds/bun-websocket-otel/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
bun otel:run
bun dev
```

----------------------------------------

TITLE: Install @orpc/arktype
DESCRIPTION: This command installs the package for OpenAPI spec generation from ArkType with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_14

LANGUAGE: bash
CODE:
```
npm install @orpc/arktype
```

----------------------------------------

TITLE: Install @orpc/tanstack-query
DESCRIPTION: Provides installation commands for @orpc/tanstack-query using various package managers including npm, yarn, pnpm, bun, and deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/integrations/tanstack-query.md#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @orpc/tanstack-query@latest
```

LANGUAGE: sh
CODE:
```
yarn add @orpc/tanstack-query@latest
```

LANGUAGE: sh
CODE:
```
pnpm add @orpc/tanstack-query@latest
```

LANGUAGE: sh
CODE:
```
bun add @orpc/tanstack-query@latest
```

LANGUAGE: sh
CODE:
```
deno add npm:@orpc/tanstack-query@latest
```

----------------------------------------

TITLE: Install @orpc/experimental-react-swr
DESCRIPTION: This command installs the @orpc/experimental-react-swr package, providing integration for oRPC with SWR for React applications. It's an experimental package for leveraging SWR's features with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_9

LANGUAGE: bash
CODE:
```
npm install @orpc/experimental-react-swr
```

----------------------------------------

TITLE: Install @orpc/otel
DESCRIPTION: This command installs the @orpc/otel package, providing OpenTelemetry integration for observability within your oRPC services. It helps in monitoring and tracing API requests.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_5

LANGUAGE: bash
CODE:
```
npm install @orpc/otel
```

----------------------------------------

TITLE: Fastify Adapter Basic Setup
DESCRIPTION: Demonstrates the basic setup for integrating oRPC with Fastify. It involves creating an RPCHandler, configuring Fastify to use a custom server factory that intercepts requests for oRPC, and then passing unmatched requests to Fastify.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/fastify.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { createServer } from 'node:http'
import Fastify from 'fastify'
import { RPCHandler } from '@orpc/server/node'
import { CORSPlugin } from '@orpc/server/plugins'

const handler = new RPCHandler(router, {
  plugins: [
    new CORSPlugin()
  ]
})

const fastify = Fastify({
  logger: true,
  serverFactory: (fastifyHandler) => {
    const server = createServer(async (req, res) => {
      const { matched } = await handler.handle(req, res, {
        context: {},
        prefix: '/rpc',
      })

      if (matched) {
        return
      }

      fastifyHandler(req, res)
    })

    return server
  },
})

try {
  await fastify.listen({ port: 3000 })
}
catch (err) {
  fastify.log.error(err)
  process.exit(1)
}
```

----------------------------------------

TITLE: Scaffold oRPC Projects with TanStack Router
DESCRIPTION: create-start-app is a tool to quickly scaffold new React projects that integrate TanStack Router and oRPC. It aims to provide a streamlined setup for developers.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/ecosystem.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install -g create-start-app
create-start-app my-app
```

----------------------------------------

TITLE: Svelte Kit RPC Handler Setup
DESCRIPTION: This snippet demonstrates how to set up an oRPC handler within a Svelte Kit project. It imports necessary components from '@sveltejs/kit' and '@orpc/server/fetch', creates an instance of RPCHandler, and defines a 'handle' function to process incoming requests. The handler supports multiple HTTP methods (GET, POST, PUT, PATCH, DELETE) and allows for context customization.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/svelte-kit.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { error } from '@sveltejs/kit'
import { RPCHandler } from '@orpc/server/fetch'

const handler = new RPCHandler(router)

const handle: RequestHandler = async ({ request }) => {
  const { response } = await handler.handle(request, {
    prefix: '/rpc',
    context: {} // Provide initial context if needed
  })

  return response ?? new Response('Not Found', { status: 404 })
}

export const GET = handle
export const POST = handle
export const PUT = handle
export const PATCH = handle
export const DELETE = handle
```

----------------------------------------

TITLE: Install @orpc/hey-api
DESCRIPTION: This command installs the @orpc/hey-api package, which integrates oRPC with Hey API. This allows for type-safe API consumption using the Hey API client.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/solid-query/README.md#_snippet_11

LANGUAGE: bash
CODE:
```
npm install @orpc/hey-api
```

----------------------------------------

TITLE: Install @orpc/hey-api
DESCRIPTION: This command installs the @orpc/hey-api package, providing integration between oRPC and Hey API. Hey API is a tool for generating API clients.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/vue-query/README.md#_snippet_11

LANGUAGE: bash
CODE:
```
npm install @orpc/hey-api
```

----------------------------------------

TITLE: Install @orpc/vue-colada
DESCRIPTION: This command installs the integration for Pinia Colada with oRPC.

SOURCE: https://github.com/unnoq/orpc/blob/main/packages/standard-server-node/README.md#_snippet_10

LANGUAGE: bash
CODE:
```
npm install @orpc/vue-colada
```

----------------------------------------

TITLE: Install @orpc/zod
DESCRIPTION: Provides installation commands for the @orpc/zod package using various package managers including npm, yarn, pnpm, bun, and deno.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/openapi/plugins/zod-smart-coercion.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @orpc/zod@latest
```

LANGUAGE: bash
CODE:
```
yarn add @orpc/zod@latest
```

LANGUAGE: bash
CODE:
```
pnpm add @orpc/zod@latest
```

LANGUAGE: bash
CODE:
```
bun add @orpc/zod@latest
```

LANGUAGE: bash
CODE:
```
deno add npm:@orpc/zod@latest
```

----------------------------------------

TITLE: TanStack Start Optimized SSR oRPC Client
DESCRIPTION: Optimizes Server-Side Rendering (SSR) for oRPC in TanStack Start by implementing a server-side client. This approach reduces latency and HTTP requests during SSR, using `createIsomorphicFn` to manage client instantiation across environments.

SOURCE: https://github.com/unnoq/orpc/blob/main/apps/content/docs/adapters/tanstack-start.md#_snippet_2

LANGUAGE: typescript
CODE:
```
import { createRouterClient } from '@orpc/server'
import type { RouterClient } from '@orpc/server'
import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch'
import { getHeaders } from '@tanstack/react-start/server'
import { createIsomorphicFn } from '@tanstack/react-start'

const getORPCClient = createIsomorphicFn()
  .server(() => createRouterClient(router, {
    context: async () => ({
      headers: getHeaders(),
    }),
  }))
  .client((): RouterClient<typeof router> => {
    const link = new RPCLink({
      url: `${window.location.origin}/api/rpc`,
    })

    return createORPCClient(link)
  })

export const client: RouterClient<typeof router> = getORPCClient()
```