Skip to main content
import {QueryClient, QueryClientProvider, useSuspenseQuery} from "@tanstack/react-query"
For advanced data fetching needs, you can use the popular React Query library. It provides a powerful and flexible way to manage data fetching and caching for your application.

​
Example: Fetching stoic quotes with React Query

First, you create a server function to fetch a random stoic quote.
get-stoic-quote.server.ts
export default async function getStoicQuote(): Promise<StoicQuote> {
  // fetch a stoic quote from somewhere
}
Then, you create an record action that will show a dialog. To use React Query, you wrap the dialog component in a QueryClientProvider and pass the queryClient to it.
stoic-quote.action.tsx
import type {RecordAction} from "attio/client"
import {showDialog} from "attio/client"
import {QueryClient, QueryClientProvider} from "@tanstack/react-query"

import {StoicQuote} from "./stoic-quote"

const queryClient = new QueryClient()

export const recordAction: RecordAction = {
  id: "stoic-quote",
  label: "Get a stoic quote",
  onTrigger: async ({recordId}) => {
    showDialog({
      title: "Stoic quote",
      Dialog: () => {
        return (
          <QueryClientProvider client={queryClient}>
            <StoicQuote recordId={recordId} />
          </QueryClientProvider>
        )
      },
    })
  },
}
Finally, you create a quote component that will use the useSuspenseQuery hook to fetch the quote.
stoic-quote.tsx
import {TextBlock} from "attio/client"
import {useSuspenseQuery} from "@tanstack/react-query"
import getStoicQuote from "./get-stoic-quote.server"

export function StoicQuote({recordId}: {recordId: string}) {
  const {data: quote} = useSuspenseQuery({
    queryKey: ["quote", recordId],
    queryFn: () => getStoicQuote(recordId),
  })

  return (
    <>
      <TextBlock align="center">{quote.text}</TextBlock>
      <TextBlock align="right">– {quote.author}</TextBlock>
    </>
  )
}