React

import { createORPCReact } from '@orpc/react'
import { createORPCClient } from '@orpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'
import type { router } from 'examples/server'
import * as React from 'react'
 
export const { orpc, ORPCContext } = createORPCReact<typeof router /** or contract router */>()
 
export function ORPCProvider({ children }: { children: React.ReactNode }) {
    const [client] = useState(() => createORPCClient<typeof router /** must match with createORPCReact*/>({
        baseURL: 'http://localhost:3000/api',
    }))
    const [queryClient] = useState(() => new QueryClient())
 
    return (
        <QueryClientProvider client={queryClient}>
            <ORPCContext.Provider value={{ client, queryClient }}>
                {/* If you has own QueryClientProvider please put it here*/}
                {children}
            </ORPCContext.Provider>
        </QueryClientProvider>
    )
}

import { orpc } from 'examples/react'
 
const { data: gettingData } = orpc.getting.useQuery({ name: 'unnoq' })
const { data: postData } = orpc.post.find.useQuery({ id: 'example' })
const { mutate: postMutate } = orpc.post.create.useMutation()
 
orpc.post.find.
useInfiniteQuery
useIsFetching
useIsMutating
useMutation
useMutationState
usePrefetchInfiniteQuery
usePrefetchQuery
useQuery
useSuspenseInfiniteQuery
useSuspenseQuery
 
 
 
 
 
 
 
 
 
 
 

import { os } from '@orpc/server'
import { z } from 'zod'
import * as React from 'react'
import { createORPCReact } from '@orpc/react'
 
const router = {
    user: {
        list: os
        .input(z.object({ cursor: z.number(), limit: z.number() }))
        .func((input) => {
            return {
                nextCursor: input.cursor + input.limit,
                users: []
            }
        })
    }
}
 
const { orpc } = createORPCReact<typeof router>()
 
export function MyComponent() {
    const query = orpc.user.list.useInfiniteQuery(
         {
            input: { limit: 10 },
            getNextPageParam: (lastPage) => lastPage.nextCursor,
            initialPageParam: 0,
        })
 
    return (
        <div>
            {query.status === 'pending' && 'pending...'}
            {query.status === 'success' && <div>Data: {JSON.stringify(query.data)}</div>}
            {query.status === 'error' && <div>Error: {query.error.message}</div>}
        </div>
    )
}

import { orpc } from 'examples/react'
 
const utils = orpc.useUtils()
utils.invalidate() // invalidate all queries
const data = await utils.getting.fetchQuery({ name: 'unnoq' })
 
utils.post.find.
cancel
ensureInfiniteQueryData
ensureQueryData
fetchInfiniteQuery
fetchQuery
getInfiniteQueriesData
getInfiniteQueryData
getInfiniteQueryDefaults
getInfiniteQueryState
getMutationDefaults
getQueriesData
getQueryData
getQueryDefaults
getQueryState
invalidate
isFetching
isMutating
prefetchInfiniteQuery
prefetchQuery
refetch
remove
reset
setInfiniteQueriesData
setInfiniteQueryData
setInfiniteQueryDefaults
setMutationDefaults
setQueriesData
setQueryData
setQueryDefaults
 

import { orpc } from 'examples/react'
 
const queries = orpc.useQueries(o => [
  o.getting({ name: 'unnoq' }), 
  o.post.find({ id: 'example' })
])

import { orpc } from 'examples/react'
 
const {client, queryClient} = orpc.useContext()
 
const data = await client.getting({ name: 'unnoq' })