pyRPC
← Back to Blog

Guide: @pyrpc/react from zero to useQuery

·8 min read
npm install @pyrpc/react @pyrpc/client @pyrpc/types @tanstack/react-query
// lib/pyrpc.ts
import { createReactClient } from "@pyrpc/react"
import type { Types } from "@pyrpc/types"

export const api = createReactClient<Types>({
  baseUrl: "http://localhost:8000",
})
// App.tsx
import { api } from "./lib/pyrpc"

export function App() {
  return (
    <api.Provider>
      <Greeting />
    </api.Provider>
  )
}

function Greeting() {
  const { data, isLoading } = api.greet.useQuery({ name: "Ada" })
  if (isLoading) return <p>…</p>
  return <p>{data}</p>
}

Utils

const utils = api.useUtils()
await utils.greet.invalidate({ name: "Ada" })
await utils.greet.prefetch({ name: "Ada" })

Same-origin tip

In the browser, omitting baseUrl can fall back to window.location.origin when your API is reverse-proxied on the same host. For local split ports, set baseUrl explicitly.

Need App Router? Next tutorial