Block Prefetch

Prefetch relation data for blocks — images, related records, and nested content.

Blocks often reference related data — images, linked records, etc. Use .prefetch() to define what should be loaded alongside block values.

Basic Prefetch

blocks/hero.ts

export const heroBlock = block("hero")
	.fields(({ f }) => ({
		title: f.text().required(),
		backgroundImage: f.upload({ to: "assets" }),
	}))
	.prefetch({
		with: {
			backgroundImage: true, // Load the full image record
		},
	});

When this block is fetched, data.backgroundImage will contain the full asset record (including url, filename, mimeType, etc.) instead of just the ID.

Nested Prefetch

Prefetch nested relations:

.prefetch({
  with: {
    featuredBarber: {
      with: {
        avatar: true,
        services: true,
      },
    },
  },
})

Using Prefetched Data

In the renderer, prefetched data appears in the data prop:

function HeroRenderer({ values, data }: BlockProps<"hero">) {
	// values.backgroundImage = "asset-id-123" (just the ID)
	// data.backgroundImage = { url: "/api/assets/...", filename: "hero.jpg", ... }

	return (
		<section>
			{data?.backgroundImage?.url && (
				<img src={data.backgroundImage.url} alt="" />
			)}
			<h1>{values.title}</h1>
		</section>
	);
}

Defining Blocks — Block definitions
Renderers — React rendering
Relations — Relation queries

Basic Prefetch

Nested Prefetch

Using Prefetched Data

Related Pages

On this page