Vanilla

import { createORPCClient, ORPCError } from '@orpc/client'
import { ORPCLink } from '@orpc/client/fetch'
import type { router } from 'examples/server'
 
const orpcLink = new ORPCLink({
  url: 'http://localhost:3000/api',
  // fetch: optional override for the default fetch function
  // headers: provide additional headers
})
 
const client = createORPCClient<typeof router /* or contract router */>(orpcLink)
 
//  File upload out of the box
const output = await client.posts.createPost({
  title: 'My Amazing Title',
  description: 'This is a detailed description of my content',
  thumb: (document.getElementById('thumb') as HTMLInputElement).files[0]!,
})
 
client.posts.
createPost
getPost
 

import type { router } from 'examples/server'
import { createORPCClient, ORPCError } from '@orpc/client'
import { ORPCLink } from '@orpc/client/fetch'
 
type ClientContext = { cache?: RequestCache } | undefined
// if context is not undefinable, it will require you pass context in every call
 
const orpcLink = new ORPCLink<ClientContext>({
  url: 'http://localhost:3000/api',
  // headers: provide additional headers
  fetch: (input, init, context) => globalThis.fetch(input, {
    ...init,
    cache: context?.cache,
  }),
  method: (path, input, context) => {
    // if input contain file, and you return GET, oRPC will change it to POST automatically
 
    if (context?.cache) {
      return 'GET'
    }
 
    // or base on the path
    if (['get', 'find', 'list', 'search'].includes(path.at(-1)!)) {
      return 'GET'
    }
 
    return 'POST'
  },
})
 
const client = createORPCClient<typeof router, ClientContext>(orpcLink)
 
client.getUser({ id: '123' }, { context: { cache: 'force-cache' } })

import type { router } from 'examples/server'
import { createORPCClient, DynamicLink, ORPCError } from '@orpc/client'
import { ORPCLink } from '@orpc/client/fetch'
 
const orpcLink1 = new ORPCLink({
  url: 'http://localhost:3000/api',
  // headers: provide additional headers
})
 
const orpcLink2 = new ORPCLink({
  url: 'http://localhost:8000/api',
  // headers: provide additional headers
})
 
const dynamicLink = new DynamicLink((path, input, context) => { // can be async
  if (path.includes('post')) {
    return orpcLink1
  }
 
  return orpcLink2
})
 
const client = createORPCClient<typeof router>(dynamicLink)