Skip to main content
import {useAsyncCache} from "attio/client"
While the async functions are running, the component that uses this hook will “suspend”.You MUST wrap the component in a <React.Suspense/> component and give it a fallback component to render until the functions have completed.

​
Example

load-widgets.server.ts
export default async function loadWidgets(): Promise<Array<Widget>> {
  // fetch widgets from somewhere
}
load-sprockets.server.ts
export default async function loadSprockets(
  material: Material,
  max?: number
): Promise<Array<Sprocket>> {
  // fetch sprockets from somewhere
}

import { useAsyncCache } from "attio/client"

import loadWidgets from "./load-widgets.server.ts"
import loadSprockets from "./load-sprockets.server.ts"

...

// inside component:

const results = useAsyncCache({
  // loadWidgets takes zero parameters and can thus be called without an array
  widgets: loadWidgets,
  // loadSprockets takes a `material` parameter, so we call it like this
  ironSprockets: [loadSprockets, "iron"],
  copperSprockets: [loadSprockets, "copper", 42],
})

const { widgets, ironSprockets, copperSprockets } = results.values

...

// inside an event handler, perhaps, to refetch _only_ the iron sprockets
results.invalidate("ironSprockets")

​
Parameters

It takes an object mapping a string key to an async function. If the function requires parameters, the key should map to an array with the async function as the first element and the parameters as the subsequent elements.

​
Returns

An object containing:
  • values: an object mapping from the string keys provided to whatever type that key’s async function returns
  • invalidate: a (key: string) => void function to call to invalidate individual cached values, called with the key you want to invalidate
Calling invalidate() will cause the values for the specified function to be fetched again, re-suspending the component.

​
Alternative: React Query

For advanced data fetching needs, you can use the popular React Query library.