React Query

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 a 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.

src/app/extensions/stoic-quote/extension.tsx

import {Extensions, showDialog} from "attio/client"
import {QueryClient, QueryClientProvider} from "@tanstack/react-query"

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

const queryClient = new QueryClient()

export default Extensions.defineExtension({
  type: "record-action",
  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.

src/app/extensions/stoic-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>
    </>
  )
}

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example: Fetching stoic quotes with React Query

​Example: Fetching stoic quotes with React Query

Example: Fetching stoic quotes with React Query