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>
		</>
	);
}