useAsyncCache()

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.

Inside a workflow block configurator you don’t add your own <React.Suspense>: the editor provides the boundary and shows the block as loading while it suspends. See Loading data.

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.

useQuery()React Query

⌘I

Introduction

Guides

Workflow blocks

Entry points

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Example

Parameters

Returns

Alternative: React Query

​Example

​Parameters

​Returns

​Alternative: React Query

Example

Parameters

Returns

Alternative: React Query