docs: Add pagination to getting-started page

Author: ntucker

docs/core/getting-started/data-dependency.md

@@ -28,22 +28,6 @@ which guarantees data like [await](https://developer.mozilla.org/en-US/docs/Web/
 ```ts title="Resources" collapsed
 import { Entity, createResource } from '@data-client/rest';
 
-export class Post extends Entity {
-  id = 0;
-  userId = 0;
-  title = '';
-  body = '';
-
-  pk() {
-    return this.id?.toString();
-  }
-  static key = 'Post';
-}
-export const PostResource = createResource({
-  path: '/posts/:id',
-  schema: Post,
-});
-
 export class User extends Entity {
   id = 0;
   name = '';
@@ -57,7 +41,7 @@ export class User extends Entity {
   }
 
   pk() {
-    return `${this.id}`;
+    return this.id;
   }
   static key = 'User';
 }
@@ -66,22 +50,42 @@ export const UserResource = createResource({
   path: '/users/:id',
   schema: User,
 });
+
+export class Post extends Entity {
+  id = 0;
+  author = User.fromJS();
+  title = '';
+  body = '';
+
+  pk() {
+    return this.id;
+  }
+  static key = 'Post';
+
+  static schema = {
+    author: User,
+  };
+}
+export const PostResource = createResource({
+  path: '/posts/:id',
+  schema: Post,
+  paginationField: 'page',
+});
 ```
 
-```tsx title="PostDetail" {5-6} collapsed
+```tsx title="PostDetail" {5} collapsed
 import { useSuspense } from '@data-client/react';
-import { UserResource, PostResource } from './Resources';
+import { PostResource } from './Resources';
 
 export default function PostDetail({ setRoute, id }) {
   const post = useSuspense(PostResource.get, { id });
-  const author = useSuspense(UserResource.get, { id: post.userId });
   return (
     <div>
       <header>
         <div className="listItem spaced">
           <div className="author">
-            <Avatar src={author.profileImage} />
-            <small>{author.name}</small>
+            <Avatar src={post.author.profileImage} />
+            <small>{post.author.name}</small>
           </div>
           <h4>{post.title}</h4>
         </div>
@@ -101,15 +105,13 @@ export default function PostDetail({ setRoute, id }) {
 }
 ```
 
-```tsx title="PostItem" {5} collapsed
-import { useSuspense } from '@data-client/react';
-import { UserResource, type Post } from './Resources';
+```tsx title="PostItem" collapsed
+import { type Post } from './Resources';
 
 export default function PostItem({ post, setRoute }: Props) {
-  const author = useSuspense(UserResource.get, { id: post.userId });
   return (
     <div className="listItem spaced">
-      <Avatar src={author.profileImage} />
+      <Avatar src={post.author.profileImage} />
       <div>
         <h4>
           <a
@@ -122,7 +124,7 @@ export default function PostItem({ post, setRoute }: Props) {
             {post.title}
           </a>
         </h4>
-        <small>by {author.name}</small>
+        <small>by {post.author.name}</small>
       </div>
     </div>
   );
@@ -152,6 +154,8 @@ export default function PostList({ setRoute }) {
 ```
 
 ```tsx title="Navigation" collapsed
+import { useController, useLoading } from '@data-client/react';
+import { PostResource } from './Resources';
 import PostList from './PostList';
 import PostDetail from './PostDetail';
 
@@ -160,7 +164,21 @@ function Navigation() {
   if (route.startsWith('detail'))
     return <PostDetail setRoute={setRoute} id={route.split('/')[1]} />;
 
-  return <PostList setRoute={setRoute} />;
+  return <><PostList setRoute={setRoute} /><LoadMore /></>;
+}
+
+function LoadMore() {
+  const ctrl = useController();
+  const posts = useQuery(PostResource.getList.schema);
+  const [nextPage, isPending] = useLoading(
+    () => ctrl.fetch(PostResource.getList.getPage, { page: 2 }),
+  );
+  if (posts?.length % 3 !== 0) return null;
+  return (
+    <center>
+      <button onClick={nextPage}>{isPending ? "..." : 'Load more'}</button>
+    </center>
+  )
 }
 render(<Navigation />);
 ```

docs/core/shared/_VoteDemo.mdx

@@ -4,34 +4,43 @@ import HooksPlayground from '@site/src/components/HooksPlayground';
 <HooksPlayground fixtures={postFixtures} getInitialInterceptorData={() => ({votes: {}})} row defaultTab={props.defaultTab}>
 
 ```ts title="Post" collapsed
-import { Entity } from '@data-client/rest';
+import { Entity, schema } from '@data-client/rest';
 
 export class Post extends Entity {
   id = 0;
-  userId = 0;
+  author = { id: 0 };
   title = '';
   body = '';
   votes = 0;
 
   pk() {
-    return this.id?.toString();
+    return this.id;
   }
   static key = 'Post';
 
+  static schema = {
+    author: schema.Entity(
+      class User {
+        id = 0;
+      },
+    ),
+  };
+
   get img() {
     return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
   }
 }
 ```
 
-```ts title="PostResource" {14-21}
+```ts title="PostResource" {15-22}
 import { createResource } from '@data-client/rest';
 import { Post } from './Post';
 
 export { Post };
 
 export const PostResource = createResource({
   path: '/posts/:id',
+  searchParams: {} as { userId?: string | number } | undefined,
   schema: Post,
 }).extend('vote', {
   path: '/posts/:id/vote',
@@ -76,7 +85,9 @@ export default function PostItem({ post }: Props) {
     </div>
   );
 }
-interface Props { post: Post }
+interface Props {
+  post: Post;
+}
 ```
 
 ```tsx title="TotalVotes" collapsed {15}
@@ -88,7 +99,7 @@ const queryTotalVotes = new schema.Query(
   new schema.All(Post),
   (posts, { userId } = {}) => {
     if (userId !== undefined)
-      posts = posts.filter(post => post.userId === userId);
+      posts = posts.filter(post => post.author.id === userId);
     return posts.reduce((total, post) => total + post.votes, 0);
   },
 );
@@ -101,7 +112,9 @@ export default function TotalVotes({ userId }: Props) {
     </center>
   );
 }
-interface Props { userId: number }
+interface Props {
+  userId: number;
+}
 ```
 
 ```tsx title="PostList" collapsed

docs/core/shared/_pagination.mdx

@@ -19,7 +19,7 @@ export class User extends Entity {
   }
 
   pk() {
-    return `${this.id}`;
+    return this.id;
   }
   static key = 'User';
 }
@@ -36,7 +36,7 @@ export class Post extends Entity {
   body = '';
 
   pk() {
-    return this.id?.toString();
+    return this.id;
   }
   static key = 'Post';
 

docs/core/shared/_useLoading.mdx

@@ -8,13 +8,13 @@ import { Entity, createResource } from '@data-client/rest';
 
 export class Post extends Entity {
   id = 0;
-  userId = 0;
+  author = 0;
   title = '';
   body = '';
   votes = 0;
 
   pk() {
-    return this.id?.toString();
+    return this.id;
   }
   static key = 'Post';
 

docs/core/shared/_useTransition.mdx

@@ -11,13 +11,13 @@ import { Entity, createResource } from '@data-client/rest';
 
 export class Post extends Entity {
   id = 0;
-  userId = 0;
+  author = 0;
   title = '';
   body = '';
   votes = 0;
 
   pk() {
-    return this.id?.toString();
+    return this.id;
   }
   static key = 'Post';