diff --git a/README.md b/README.md index 71b0004..2b945d7 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,50 @@ export const schema = createSchema( ); ``` +You can then use the generated Zero schema in a React component: + +```tsx +import { useQuery, useZero } from "@rocicorp/zero/react"; + +function PostList({ selectedAuthorId }: { selectedAuthorId?: number }) { + const z = useZero(); + + // Build a query for posts with their authors and comments + let postsQuery = z.query.post + .related('author') + .related('comments') + .limit(100); + + // Filter by author if selectedAuthorId is provided + if (selectedAuthorId) { + postsQuery = postsQuery.where('author_id', '=', selectedAuthorId); + } + + const [posts, postsDetail] = useQuery(postsQuery); + + return ( +
By: {post.author?.name}
+