Calling procedures

Learn how to call queries and mutations in your app.

Overview#

There are two ways to call procedures. In client components we use the useQuery and useMutation hooks to call the procedures. On the server we use the trpc api caller to call the procedures directly.

Client#

The client uses Tanstack Query to manage data fetching and caching.

useQuery#

import { api } from '#lib/trpc/react'

export function ContactPage(props: {
  params: {
    id: string
  }
}) {
  const { data, isLoading } = api.contacts.byId.useQuery({
    id,
  })

  // render the page
}

useSuspenseQuery#

useSuspenseQuery is very useful as it guarantees data to be defined, so you don't have to check for isLoading for conditional rendering.

It's recommended to prefetch your data as early as possible.

// for example in a page or layout route
import { Outlet, createFileRoute, notFound } from '@tanstack/react-router'

import { WorkspaceNotFound } from '#features/workspaces/workspace.not-found'

export const Route = createFileRoute('/_app/$workspace')({
  beforeLoad: async ({ params, context }) => {
    const workspace = await context.trpc.workspaces.bySlug.ensureData({
      slug: params?.workspace,
    })

    if (!workspace) {
      throw notFound()
    }

    return { workspace }
  },
  notFoundComponent: WorkspaceNotFound,
  component: RouteComponent,
})

function RouteComponent() {
  return <Outlet />
}

import { api } from '#lib/trpc/react'

export function WorkspacePage(props: { slug: string }) {
  const [data] = api.workspaces.bySlug.useSuspenseQuery({
    slug: props.slug,
  })

  return <div>{data.name}</div>
}

useMutation#

import { api } from '#lib/trpc/react'

export default function ProfilePage() {
  const { user } = useAuth()

  const utils = api.useUtils()

  const mutation = api.users.updateProfile.useMutation({
    onSettled: () => {
      // Invalidate the user cache, so the updated user is refetched
      utils.users.invalidate()
    },
  })

  return (
    <button
      onClick={() => {
        mutation.mutate({
          name: 'John Doe',
        })
      }}
    >
      Save
    </button>
  )
}

Was this helpful?