Skip to content

doc: replace swr with TanStack for next page router tutorial #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 26, 2024
Merged

doc: replace swr with TanStack for next page router tutorial #337

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions docs/quick-start/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,11 +218,11 @@ value (use a complex secret in production and don't check it into git):
ZenStack has built-in support for Next.js and can provide database CRUD services
automagically, so you don't need to write it yourself.

First, install the `@zenstackhq/server` and `@zenstackhq/swr` packages:
First install the `@zenstackhq/server`, `@tanstack/react-query`, and `@zenstackhq/tanstack-query` packages:

```bash
npm install @zenstackhq/server swr
npm install -D @zenstackhq/swr
npm install @zenstackhq/server@latest @tanstack/react-query
npm install -D @zenstackhq/tanstack-query@latest
```

Let's mount it to the `/api/model/[...path]` endpoint. Create a `/src/pages/api/model/[...path].ts`
Expand Down Expand Up @@ -253,7 +253,9 @@ Let's enable it by adding the following snippet at the top level to `schema.zmod

```zmodel
plugin hooks {
provider = '@zenstackhq/swr'
provider = '@zenstackhq/tanstack-query'
target = 'react'
version = 'v5'
output = "./src/lib/hooks"
}
```
Expand All @@ -274,17 +276,22 @@ First, NextAuth and React Query require context providers to be set up. Let's ad
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import "../styles/globals.css";

const queryClient = new QueryClient();

const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
<QueryClientProvider client={queryClient}>
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
</QueryClientProvider>
);
};

Expand All @@ -306,7 +313,7 @@ import { useCreateUser } from "../lib/hooks";
const Signup: NextPage = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const { trigger: signup } = useCreateUser();
const { mutateAsync: signup } = useCreateUser();

async function onSignup(e: FormEvent) {
e.preventDefault();
Expand Down Expand Up @@ -570,9 +577,9 @@ const SigninSignup = () => {

const Posts = () => {
// Post crud hooks
const { trigger: createPost } = useCreatePost();
const { trigger: updatePost } = useUpdatePost();
const { trigger: deletePost } = useDeletePost();
const { mutateAsync: createPost } = useCreatePost();
const { mutateAsync: updatePost } = useUpdatePost();
const { mutateAsync: deletePost } = useDeletePost();

// list all posts that're visible to the current user, together with their authors
const { data: posts } = useFindManyPost({
Expand Down