Closed jiashengguo closed 2 months ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
zenstack-new-site | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jul 26, 2024 4:11am |
The integration of ZenStack with Next.js has undergone significant updates, shifting from swr
to @tanstack/react-query
for data management. This change enhances data-fetching efficiency and aligns with React's concurrent features. Key modifications include a new query handling configuration, the introduction of QueryClient
for managing data across components, and a streamlined approach to asynchronous operations using mutateAsync
. Overall, these updates modernize the architecture, improving performance and developer experience.
File Path | Change Summary |
---|---|
src/pages/_app.tsx |
Introduced QueryClient for data management; no change in MyApp signature, but context updated. |
src/components/Signup.tsx |
Updated user creation to use mutateAsync instead of trigger . |
src/components/Posts.tsx |
Transitioned post CRUD operations to use mutateAsync for creating, updating, and deleting posts. |
sequenceDiagram
participant User
participant Signup
participant Posts
participant QueryClient
User->>Signup: Submit Signup Form
Signup->>QueryClient: mutateAsync for User Creation
QueryClient-->>Signup: Response
Signup-->>User: Signup Confirmation
User->>Posts: Create/Update/Delete Post
Posts->>QueryClient: mutateAsync for CRUD Operations
QueryClient-->>Posts: Response
Posts-->>User: Operation Confirmation
docs/quick-start/nextjs.mdx (6)
`221-225`: **LGTM! Installation instructions for new packages are clear.** The installation of `@zenstackhq/server`, `@tanstack/react-query`, and `@zenstackhq/tanstack-query` is correctly outlined. --- `256-258`: **LGTM! Plugin configuration for generating React hooks is correct.** The addition of plugin hooks in `schema.zmodel` aligns with the new data-fetching strategy. --- `580-582`: **LGTM! Configuration of the `Post` model is correct.** The configuration of the `Post` model aligns with the new data-fetching strategy. --- `316-316`: **LGTM! Usage of `mutateAsync` in Signup component is correct.** The `mutateAsync` method from `useCreateUser` hook is correctly used in the Signup component. However, ensure that error handling is comprehensive and covers all potential issues. --- `279-294`: **LGTM! Integration of `QueryClient` and `QueryClientProvider` is correct.** The `QueryClient` and `QueryClientProvider` are correctly integrated into the `MyApp` component. However, ensure that all components using React Query are wrapped within the `QueryClientProvider`. --- `580-582`: **LGTM! Usage of `mutateAsync` in Posts component is correct.** The `mutateAsync` method from `useCreatePost`, `useUpdatePost`, and `useDeletePost` hooks is correctly used in the Posts component. However, ensure that error handling is comprehensive and covers all potential issues.
Summary by CodeRabbit
New Features
QueryClient
andQueryClientProvider
.Bug Fixes
Documentation