diff --git a/.agents/skills/data-client-react/references/data-dependency.md b/.agents/skills/data-client-react/references/data-dependency.md
index 8e395927b44a..dfea70ee287c 100644
--- a/.agents/skills/data-client-react/references/data-dependency.md
+++ b/.agents/skills/data-client-react/references/data-dependency.md
@@ -151,6 +151,98 @@ us to make error/loading disjoint from data usage.
 Instead we place [\<AsyncBoundary />](./AsyncBoundary.md) to handling loading and error conditions at or above navigational boundaries like **pages,
 routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+Files with a `route` are pages mounted at that path, with its params as props; `Link` and `useNavigate()` stand for your router (with react-router, read params with `useParams()`).
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail"
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList"
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
 **React Router**
 
 ```tsx {9,11} title="Dashboard.tsx"
diff --git a/.agents/skills/data-client-rest/references/data-dependency.md b/.agents/skills/data-client-rest/references/data-dependency.md
index c765810db0cc..8f3e0bce3c98 100644
--- a/.agents/skills/data-client-rest/references/data-dependency.md
+++ b/.agents/skills/data-client-rest/references/data-dependency.md
@@ -151,6 +151,98 @@ us to make error/loading disjoint from data usage.
 Instead we place [\<AsyncBoundary />](https://dataclient.io/docs/api/AsyncBoundary) to handling loading and error conditions at or above navigational boundaries like **pages,
 routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+Files with a `route` are pages mounted at that path, with its params as props; `Link` and `useNavigate()` stand for your router (with react-router, read params with `useParams()`).
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail"
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList"
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
 **React Router**
 
 ```tsx {9,11} title="Dashboard.tsx"
diff --git a/.agents/skills/data-client-rest/references/data-dependency.vue.md b/.agents/skills/data-client-rest/references/data-dependency.vue.md
index b5eb62a70cae..79d12df75867 100644
--- a/.agents/skills/data-client-rest/references/data-dependency.vue.md
+++ b/.agents/skills/data-client-rest/references/data-dependency.vue.md
@@ -160,6 +160,120 @@ us to make error/loading disjoint from data usage.
 Instead we place Vue's built-in [\<Suspense />](https://vuejs.org/guide/built-ins/suspense.html) along with [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) to handling loading and error conditions at or above navigational boundaries like **pages,
 routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+Files with a `route` are pages mounted at that path, with its params as props (vue-router `props: true`).
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+```html title="Layout.vue" layout
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
 ```html title="Dashboard.vue" {15-16,23}
 <script setup lang="ts">
   import { onErrorCaptured, ref } from 'vue';
diff --git a/.agents/skills/data-client-vue/references/data-dependency.md b/.agents/skills/data-client-vue/references/data-dependency.md
index 3048b0b2fe33..71ed0723870a 100644
--- a/.agents/skills/data-client-vue/references/data-dependency.md
+++ b/.agents/skills/data-client-vue/references/data-dependency.md
@@ -160,6 +160,120 @@ us to make error/loading disjoint from data usage.
 Instead we place Vue's built-in [\<Suspense />](https://vuejs.org/guide/built-ins/suspense.html) along with [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) to handling loading and error conditions at or above navigational boundaries like **pages,
 routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+Files with a `route` are pages mounted at that path, with its params as props (vue-router `props: true`).
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+```html title="Layout.vue" layout
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
 ```html title="Dashboard.vue" {15-16,23}
 <script setup lang="ts">
   import { onErrorCaptured, ref } from 'vue';
diff --git a/docs/core/getting-started/data-dependency.md b/docs/core/getting-started/data-dependency.md
index 2e19945fc769..2efe51c8f127 100644
--- a/docs/core/getting-started/data-dependency.md
+++ b/docs/core/getting-started/data-dependency.md
@@ -9,14 +9,22 @@ sidebar_label: Render Data
 </head>
 
 import DataColocation from '@site/src/components/DataColocation';
+import { boundaryFixtures } from '@site/src/fixtures/post-comments';
 import LanguageTabs from '@site/src/components/LanguageTabs';
 import FrameworkPlayground from '@site/src/components/FrameworkPlayground';
+import SiteOnly from '@site/src/components/SiteOnly';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
 import { postFixtures } from '@site/src/fixtures/posts';
 import { detailFixtures, listFixtures } from '@site/src/fixtures/profiles';
 import UseLive from '../shared/\_useLive.mdx';
 import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
 
+export const boundaryDemo = [
+  { delay: 1000, click: 'a[href="/posts/1"]' },
+  // past the comments' 2s delay, so the page shows in full
+  { wait: 3000 },
+];
+
 # Rendering Asynchronous Data
 
 Make your components reusable by binding the data where you **use** it with the one-line [useSuspense()](../api/useSuspense.md),
@@ -268,6 +276,259 @@ us to make error/loading disjoint from data usage.
 Instead we place :react[[&lt;AsyncBoundary /\>](../api/AsyncBoundary.md)]:vue[Vue's built-in [&lt;Suspense /\>](https://vuejs.org/guide/built-ins/suspense.html) along with [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)] to handling loading and error conditions at or above navigational boundaries like **pages,
 routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+<FrameworkPlayground fixtures={boundaryFixtures} demo autoRun={boundaryDemo}>
+
+```ts title="Resources" collapsed
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+:::react
+
+```tsx title="Layout" layout collapsed docs-only
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <header className="appHeader">
+        <h1 className="appTitle">Field Notes</h1>
+      </header>
+      {children}
+    </>
+  );
+}
+```
+
+```tsx title="PostList" route="/" collapsed docs-only
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostList() {
+  const posts = useSuspense(PostResource.getList);
+  return (
+    <div className="card">
+      {posts.map(post => (
+        <div key={post.pk()} className="listItem">
+          <Avatar src={post.avatar} />
+          <div>
+            <h3>
+              <Link to={`/posts/${post.id}`}>{post.title}</Link>
+            </h3>
+            <small>{post.author}</small>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail" collapsed
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList" collapsed
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+:::
+
+:::vue
+
+```html title="Layout.vue" layout collapsed
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostList.vue" route="/" collapsed docs-only
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const posts = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div class="card">
+    <div v-for="post in posts" :key="post.pk()" class="listItem">
+      <Avatar :src="post.avatar" />
+      <div>
+        <h3>
+          <RouterLink :to="`/posts/${post.id}`">{{ post.title }}</RouterLink>
+        </h3>
+        <small>{{ post.author }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
+:::
+
+</FrameworkPlayground>
+
+<SiteOnly>
+
+:::react
+
+Show the code and move the `<AsyncBoundary>` to wrap just `<CommentList />`: the post shows before its comments do.
+
+:::
+
+</SiteOnly>
+
 <AsyncBoundaryExamples />
 
 :::react
diff --git a/website/i18n/es/docs/core/getting-started/data-dependency.md b/website/i18n/es/docs/core/getting-started/data-dependency.md
index dd88809573d9..5903d7b81e3b 100644
--- a/website/i18n/es/docs/core/getting-started/data-dependency.md
+++ b/website/i18n/es/docs/core/getting-started/data-dependency.md
@@ -9,14 +9,22 @@ sidebar_label: Renderizar datos
 </head>
 
 import DataColocation from '@site/src/components/DataColocation';
+import { boundaryFixtures } from '@site/src/fixtures/post-comments';
 import LanguageTabs from '@site/src/components/LanguageTabs';
 import FrameworkPlayground from '@site/src/components/FrameworkPlayground';
+import SiteOnly from '@site/src/components/SiteOnly';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
 import { postFixtures } from '@site/src/fixtures/posts';
 import { detailFixtures, listFixtures } from '@site/src/fixtures/profiles';
 import UseLive from '../shared/\_useLive.mdx';
 import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
 
+export const boundaryDemo = [
+  { delay: 1000, click: 'a[href="/posts/1"]' },
+  // past the comments' 2s delay, so the page shows in full
+  { wait: 3000 },
+];
+
 # Renderizar datos asíncronos
 
 Haz que tus componentes sean reutilizables vinculando los datos donde los **usas** con el [useSuspense()](../api/useSuspense.md) de una sola línea,
@@ -268,6 +276,259 @@ separar el manejo de errores y de carga del uso de los datos.
 En su lugar, colocamos :react[[&lt;AsyncBoundary /\>](../api/AsyncBoundary.md)]:vue[el [&lt;Suspense /\>](https://vuejs.org/guide/built-ins/suspense.html) integrado de Vue junto con [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)] para manejar las condiciones de carga y error en o por encima de los límites de navegación, como **páginas,
 rutas o [modales](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+<FrameworkPlayground fixtures={boundaryFixtures} demo autoRun={boundaryDemo}>
+
+```ts title="Resources" collapsed
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+:::react
+
+```tsx title="Layout" layout collapsed docs-only
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <header className="appHeader">
+        <h1 className="appTitle">Field Notes</h1>
+      </header>
+      {children}
+    </>
+  );
+}
+```
+
+```tsx title="PostList" route="/" collapsed docs-only
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostList() {
+  const posts = useSuspense(PostResource.getList);
+  return (
+    <div className="card">
+      {posts.map(post => (
+        <div key={post.pk()} className="listItem">
+          <Avatar src={post.avatar} />
+          <div>
+            <h3>
+              <Link to={`/posts/${post.id}`}>{post.title}</Link>
+            </h3>
+            <small>{post.author}</small>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail" collapsed
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList" collapsed
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+:::
+
+:::vue
+
+```html title="Layout.vue" layout collapsed
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostList.vue" route="/" collapsed docs-only
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const posts = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div class="card">
+    <div v-for="post in posts" :key="post.pk()" class="listItem">
+      <Avatar :src="post.avatar" />
+      <div>
+        <h3>
+          <RouterLink :to="`/posts/${post.id}`">{{ post.title }}</RouterLink>
+        </h3>
+        <small>{{ post.author }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
+:::
+
+</FrameworkPlayground>
+
+<SiteOnly>
+
+:::react
+
+Muestra el código y mueve el `<AsyncBoundary>` para que envuelva solo `<CommentList />`: la publicación se muestra antes que sus comentarios.
+
+:::
+
+</SiteOnly>
+
 <AsyncBoundaryExamples />
 
 :::react
diff --git a/website/i18n/pt-BR/docs/core/getting-started/data-dependency.md b/website/i18n/pt-BR/docs/core/getting-started/data-dependency.md
index e86a697314bf..081226107645 100644
--- a/website/i18n/pt-BR/docs/core/getting-started/data-dependency.md
+++ b/website/i18n/pt-BR/docs/core/getting-started/data-dependency.md
@@ -9,14 +9,22 @@ sidebar_label: Renderizar dados
 </head>
 
 import DataColocation from '@site/src/components/DataColocation';
+import { boundaryFixtures } from '@site/src/fixtures/post-comments';
 import LanguageTabs from '@site/src/components/LanguageTabs';
 import FrameworkPlayground from '@site/src/components/FrameworkPlayground';
+import SiteOnly from '@site/src/components/SiteOnly';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
 import { postFixtures } from '@site/src/fixtures/posts';
 import { detailFixtures, listFixtures } from '@site/src/fixtures/profiles';
 import UseLive from '../shared/\_useLive.mdx';
 import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
 
+export const boundaryDemo = [
+  { delay: 1000, click: 'a[href="/posts/1"]' },
+  // past the comments' 2s delay, so the page shows in full
+  { wait: 3000 },
+];
+
 # Renderizando dados assíncronos
 
 Torne seus componentes reutilizáveis associando os dados onde você os **usa**, com o [useSuspense()](../api/useSuspense.md) de uma linha,
@@ -268,6 +276,259 @@ separar o tratamento de erro/carregamento do uso dos dados.
 Em vez disso, colocamos :react[[&lt;AsyncBoundary /\>](../api/AsyncBoundary.md)]:vue[o [&lt;Suspense /\>](https://vuejs.org/guide/built-ins/suspense.html) nativo do Vue junto com [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)] para tratar as condições de carregamento e de erro em limites de navegação, ou acima deles, como **páginas,
 rotas ou [modais](https://www.appcues.com/blog/modal-dialog-windows)**.
 
+<FrameworkPlayground fixtures={boundaryFixtures} demo autoRun={boundaryDemo}>
+
+```ts title="Resources" collapsed
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+:::react
+
+```tsx title="Layout" layout collapsed docs-only
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <header className="appHeader">
+        <h1 className="appTitle">Field Notes</h1>
+      </header>
+      {children}
+    </>
+  );
+}
+```
+
+```tsx title="PostList" route="/" collapsed docs-only
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostList() {
+  const posts = useSuspense(PostResource.getList);
+  return (
+    <div className="card">
+      {posts.map(post => (
+        <div key={post.pk()} className="listItem">
+          <Avatar src={post.avatar} />
+          <div>
+            <h3>
+              <Link to={`/posts/${post.id}`}>{post.title}</Link>
+            </h3>
+            <small>{post.author}</small>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail" collapsed
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList" collapsed
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+:::
+
+:::vue
+
+```html title="Layout.vue" layout collapsed
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostList.vue" route="/" collapsed docs-only
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const posts = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div class="card">
+    <div v-for="post in posts" :key="post.pk()" class="listItem">
+      <Avatar :src="post.avatar" />
+      <div>
+        <h3>
+          <RouterLink :to="`/posts/${post.id}`">{{ post.title }}</RouterLink>
+        </h3>
+        <small>{{ post.author }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
+:::
+
+</FrameworkPlayground>
+
+<SiteOnly>
+
+:::react
+
+Mostre o código e mova o `<AsyncBoundary>` para envolver apenas o `<CommentList />`: o post aparece antes dos comentários.
+
+:::
+
+</SiteOnly>
+
 <AsyncBoundaryExamples />
 
 :::react
diff --git a/website/i18n/zh-Hans/docs/core/getting-started/data-dependency.md b/website/i18n/zh-Hans/docs/core/getting-started/data-dependency.md
index 4fd0e8db731e..14cb89c36aa3 100644
--- a/website/i18n/zh-Hans/docs/core/getting-started/data-dependency.md
+++ b/website/i18n/zh-Hans/docs/core/getting-started/data-dependency.md
@@ -9,14 +9,22 @@ sidebar_label: 渲染数据
 </head>
 
 import DataColocation from '@site/src/components/DataColocation';
+import { boundaryFixtures } from '@site/src/fixtures/post-comments';
 import LanguageTabs from '@site/src/components/LanguageTabs';
 import FrameworkPlayground from '@site/src/components/FrameworkPlayground';
+import SiteOnly from '@site/src/components/SiteOnly';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
 import { postFixtures } from '@site/src/fixtures/posts';
 import { detailFixtures, listFixtures } from '@site/src/fixtures/profiles';
 import UseLive from '../shared/\_useLive.mdx';
 import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
 
+export const boundaryDemo = [
+  { delay: 1000, click: 'a[href="/posts/1"]' },
+  // past the comments' 2s delay, so the page shows in full
+  { wait: 3000 },
+];
+
 # 渲染异步数据
 
 只需一行 [useSuspense()](../api/useSuspense.md)，就能在**使用**数据的地方绑定数据，让你的组件可复用；
@@ -268,6 +276,259 @@ Reactive Data Client 会在[数据变化](./mutations.md)时立即自动更新
 我们会在**页面、路由或[模态框](https://www.appcues.com/blog/modal-dialog-windows)**等导航边界处或其上层放置 :react[[&lt;AsyncBoundary /\>](../api/AsyncBoundary.md)]:vue[Vue 内置的 [&lt;Suspense /\>](https://vuejs.org/guide/built-ins/suspense.html) 以及 [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)]，
 用来处理加载和错误状态。
 
+<FrameworkPlayground fixtures={boundaryFixtures} demo autoRun={boundaryDemo}>
+
+```ts title="Resources" collapsed
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  author = '';
+  avatar = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  avatar = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: string },
+  schema: Comment,
+});
+```
+
+:::react
+
+```tsx title="Layout" layout collapsed docs-only
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <header className="appHeader">
+        <h1 className="appTitle">Field Notes</h1>
+      </header>
+      {children}
+    </>
+  );
+}
+```
+
+```tsx title="PostList" route="/" collapsed docs-only
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostList() {
+  const posts = useSuspense(PostResource.getList);
+  return (
+    <div className="card">
+      {posts.map(post => (
+        <div key={post.pk()} className="listItem">
+          <Avatar src={post.avatar} />
+          <div>
+            <h3>
+              <Link to={`/posts/${post.id}`}>{post.title}</Link>
+            </h3>
+            <small>{post.author}</small>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+```tsx title="PostPage" route="/posts/:id" {7,10}
+import { AsyncBoundary } from '@data-client/react';
+import CommentList from './CommentList';
+import PostDetail from './PostDetail';
+
+export default function PostPage({ id }: { id: string }) {
+  return (
+    <AsyncBoundary fallback={<Loading />}>
+      <PostDetail id={id} />
+      <CommentList postId={id} />
+    </AsyncBoundary>
+  );
+}
+```
+
+```tsx title="PostDetail" collapsed
+import { useSuspense } from '@data-client/react';
+import { PostResource } from './Resources';
+
+export default function PostDetail({ id }: { id: string }) {
+  const post = useSuspense(PostResource.get, { id });
+  return (
+    <article>
+      <h2>{post.title}</h2>
+      <p className="byline">
+        <Avatar src={post.avatar} size={20} />
+        {post.author}
+      </p>
+      <p>{post.body}</p>
+    </article>
+  );
+}
+```
+
+```tsx title="CommentList" collapsed
+import { useSuspense } from '@data-client/react';
+import { CommentResource } from './Resources';
+
+export default function CommentList({ postId }: { postId: string }) {
+  const comments = useSuspense(CommentResource.getList, { postId });
+  return (
+    <section>
+      <h3>Comments</h3>
+      <div className="card">
+        {comments.map(comment => (
+          <div key={comment.pk()} className="listItem">
+            <Avatar src={comment.avatar} size={28} />
+            <div>
+              <b>{comment.author}</b>
+              <p>{comment.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+:::
+
+:::vue
+
+```html title="Layout.vue" layout collapsed
+<template>
+  <header class="appHeader">
+    <h1 class="appTitle">Field Notes</h1>
+  </header>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+      <template #fallback><Loading /></template>
+    </Suspense>
+  </RouterView>
+</template>
+```
+
+```html title="PostList.vue" route="/" collapsed docs-only
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const posts = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div class="card">
+    <div v-for="post in posts" :key="post.pk()" class="listItem">
+      <Avatar :src="post.avatar" />
+      <div>
+        <h3>
+          <RouterLink :to="`/posts/${post.id}`">{{ post.title }}</RouterLink>
+        </h3>
+        <small>{{ post.author }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostPage.vue" route="/posts/:id" {9,15}
+<script setup lang="ts">
+  import CommentList from './CommentList.vue';
+  import PostDetail from './PostDetail.vue';
+
+  defineProps<{ id: string }>();
+</script>
+
+<template>
+  <Suspense>
+    <div>
+      <PostDetail :id="id" />
+      <CommentList :post-id="id" />
+    </div>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+```html title="PostDetail.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <article>
+    <h2>{{ post.title }}</h2>
+    <p class="byline">
+      <Avatar :src="post.avatar" :size="20" />
+      {{ post.author }}
+    </p>
+    <p>{{ post.body }}</p>
+  </article>
+</template>
+```
+
+```html title="CommentList.vue" collapsed
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { CommentResource } from './Resources';
+
+  const props = defineProps<{ postId: string }>();
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.postId,
+  }));
+</script>
+
+<template>
+  <section>
+    <h3>Comments</h3>
+    <div class="card">
+      <div v-for="comment in comments" :key="comment.pk()" class="listItem">
+        <Avatar :src="comment.avatar" :size="28" />
+        <div>
+          <b>{{ comment.author }}</b>
+          <p>{{ comment.text }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```
+
+:::
+
+</FrameworkPlayground>
+
+<SiteOnly>
+
+:::react
+
+打开代码，把 `<AsyncBoundary>` 移到只包裹 `<CommentList />`：帖子就会先于评论显示。
+
+:::
+
+</SiteOnly>
+
 <AsyncBoundaryExamples />
 
 :::react
diff --git a/website/src/fixtures/post-comments.ts b/website/src/fixtures/post-comments.ts
index cf5d6468e92d..ba28006a2a6a 100644
--- a/website/src/fixtures/post-comments.ts
+++ b/website/src/fixtures/post-comments.ts
@@ -67,3 +67,64 @@ export const parallelFetchFixtures = [
     delay,
   },
 ];
+
+const posts = [
+  {
+    id: 1,
+    title: 'Moving to a new city',
+    body: 'Three weeks in, the boxes are mostly gone. What I packed first turned out to matter least, and the one thing I left behind, a beat-up desk lamp, is the thing I miss every evening. Here is what I would pack differently next time.',
+    author: 'Maya Chen',
+    avatar: 'https://i.pravatar.cc/64?img=47',
+  },
+  {
+    id: 2,
+    title: 'Weekend bread baking',
+    body: 'A slow overnight rise in the fridge makes all the difference. The dough gets easier to shape, the crust browns better, and the whole loaf tastes like you tried much harder than you did.',
+    author: 'Sam Rivera',
+    avatar: 'https://i.pravatar.cc/64?img=12',
+  },
+  {
+    id: 3,
+    title: 'A week without notifications',
+    body: 'I turned off every notification on my phone for seven days. The first two were strange. By the end, I was checking messages on my own schedule and getting a lot more done.',
+    author: 'Priya Patel',
+    avatar: 'https://i.pravatar.cc/64?img=32',
+  },
+];
+
+/** The post arrives quickly and its comments slowly, so where the
+ * AsyncBoundary sits decides what shows while they load */
+export const boundaryFixtures = [
+  {
+    endpoint: PostResource.getList,
+    args: [],
+    response: posts,
+  },
+  {
+    endpoint: PostResource.get,
+    response: ({ id }: { id: string }) =>
+      posts.find(post => post.id === Number(id)),
+    delay: 500,
+  },
+  {
+    endpoint: CommentResource.getList,
+    // every post shares these comments
+    response: () => [
+      {
+        id: 1,
+        postId: 1,
+        author: 'Alex Kim',
+        avatar: 'https://i.pravatar.cc/64?img=8',
+        text: 'Loved this, thanks for writing it up.',
+      },
+      {
+        id: 2,
+        postId: 1,
+        author: 'Jordan Lee',
+        avatar: 'https://i.pravatar.cc/64?img=26',
+        text: 'Saving this for later.',
+      },
+    ],
+    delay: 2000,
+  },
+];
diff --git a/website/translate/lock/es.json b/website/translate/lock/es.json
index a372cea562b4..8db584e5b797 100644
--- a/website/translate/lock/es.json
+++ b/website/translate/lock/es.json
@@ -43,7 +43,7 @@
     "docs/core/concepts/reactivity.md": "1f3f4c5c445db48d04de10966da56a9946d246f8",
     "docs/core/concepts/validation.md": "5119ecd2fac7be8250dbc79c8980e082641a40a6",
     "docs/core/getting-started/agent-skills.md": "f856007e07c8dd63ec585286b77ff19433a0116c",
-    "docs/core/getting-started/data-dependency.md": "2e19945fc76917e7030449636cd720d89af6cac9",
+    "docs/core/getting-started/data-dependency.md": "2efe51c8f127d694a82521a645612396687e0261",
     "docs/core/getting-started/debugging.md": "d2b5c1e8e5faec00320384a359facc15532129d3",
     "docs/core/getting-started/installation.md": "c93346e05d241b4f2967ed1ea4ef600286320025",
     "docs/core/getting-started/mutations.md": "2dbc68d4c23d8fdf068f423f05a30b954d11a17b",
diff --git a/website/translate/lock/pt-BR.json b/website/translate/lock/pt-BR.json
index 0fd0e80b0d2c..4bc2061ee8d4 100644
--- a/website/translate/lock/pt-BR.json
+++ b/website/translate/lock/pt-BR.json
@@ -43,7 +43,7 @@
     "docs/core/concepts/reactivity.md": "1f3f4c5c445db48d04de10966da56a9946d246f8",
     "docs/core/concepts/validation.md": "5119ecd2fac7be8250dbc79c8980e082641a40a6",
     "docs/core/getting-started/agent-skills.md": "f856007e07c8dd63ec585286b77ff19433a0116c",
-    "docs/core/getting-started/data-dependency.md": "2e19945fc76917e7030449636cd720d89af6cac9",
+    "docs/core/getting-started/data-dependency.md": "2efe51c8f127d694a82521a645612396687e0261",
     "docs/core/getting-started/debugging.md": "d2b5c1e8e5faec00320384a359facc15532129d3",
     "docs/core/getting-started/installation.md": "c93346e05d241b4f2967ed1ea4ef600286320025",
     "docs/core/getting-started/mutations.md": "2dbc68d4c23d8fdf068f423f05a30b954d11a17b",
diff --git a/website/translate/lock/zh-Hans.json b/website/translate/lock/zh-Hans.json
index 46fbb4ad2ca0..e339303fc5c7 100644
--- a/website/translate/lock/zh-Hans.json
+++ b/website/translate/lock/zh-Hans.json
@@ -43,7 +43,7 @@
     "docs/core/concepts/reactivity.md": "1f3f4c5c445db48d04de10966da56a9946d246f8",
     "docs/core/concepts/validation.md": "5119ecd2fac7be8250dbc79c8980e082641a40a6",
     "docs/core/getting-started/agent-skills.md": "f856007e07c8dd63ec585286b77ff19433a0116c",
-    "docs/core/getting-started/data-dependency.md": "2e19945fc76917e7030449636cd720d89af6cac9",
+    "docs/core/getting-started/data-dependency.md": "2efe51c8f127d694a82521a645612396687e0261",
     "docs/core/getting-started/debugging.md": "d2b5c1e8e5faec00320384a359facc15532129d3",
     "docs/core/getting-started/installation.md": "c93346e05d241b4f2967ed1ea4ef600286320025",
     "docs/core/getting-started/mutations.md": "2dbc68d4c23d8fdf068f423f05a30b954d11a17b",