Add React Query integration with notes API and dashboard example

Author: minosss

examples/with-nextjs/package.json

@@ -5,6 +5,7 @@
     "dev": "next dev"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.20",
     "@yme/api": "workspace:*",
     "next": "14",
     "react": "^18.3.1",

examples/with-nextjs/src/app/QueryClientProvider.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { QueryClientProvider } from '@tanstack/react-query';
+import { getQueryClient } from '../lib/queryClient';
+
+export default function ReactQueryClientProvider({
+  children,
+}: { children: React.ReactNode }) {
+  const client = getQueryClient();
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}

examples/with-nextjs/src/app/api/notes/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse, type NextRequest } from 'next/server';
+
+const notes = [{ id: 1, title: 'Note 1', content: 'Content 1' }];
+
+export const GET = async (req: NextRequest) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return NextResponse.json({
+    records: notes,
+  });
+};
+
+export const POST = async (req: NextRequest) => {
+  const note = await req.json();
+  const id = notes.length + 1;
+  notes.push({ ...note, id });
+  return NextResponse.json({
+    id,
+  });
+};
+
+export const DELETE = async (req: NextRequest) => {
+  const { id } = await req.json();
+  const index = notes.findIndex((note) => note.id === id);
+  if (index !== -1) {
+    notes.splice(index, 1);
+  }
+  return new Response(null, { status: 204 });
+};

examples/with-nextjs/src/app/dashboard/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { notesApi } from '../../lib/apiClient';
+
+export default function Page() {
+  const qc = useQueryClient();
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: [{ name: 'notes', entity: 'list' }],
+    queryFn: async ({ signal }) => await notesApi.list({}, { signal }),
+  });
+  const $create = useMutation({
+    mutationFn: notesApi.create,
+  });
+
+  // optimistic update
+  const $delete = useMutation({
+    mutationFn: notesApi.delete,
+    onMutate: async (input) => {
+      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
+      await qc.cancelQueries({ queryKey: [{ name: 'notes' }] });
+      const prevNotes = qc.getQueryData([{ name: 'notes', entity: 'list' }]);
+
+      // Optimistically update to the new value
+      qc.setQueryData([{ name: 'notes', entity: 'list' }], (old: any) => ({
+        ...old,
+        records: old.records.filter((note) => note.id !== input.id),
+      }));
+      return { prevNotes };
+    },
+    onError: (err, variables, context) => {
+      // If the mutation fails, use the context to roll back
+      qc.setQueryData([{ name: 'notes', entity: 'list' }], context.prevNotes);
+    },
+    onSettled: async () => {
+      await qc.invalidateQueries({ queryKey: [{ name: 'notes' }] });
+    },
+  });
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Welcome to the dashboard!</p>
+      <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+
+            const form = e.currentTarget;
+            const formData = new FormData(form);
+            const title = formData.get('title') as string;
+            const content = formData.get('content') as string;
+            $create.mutate(
+              { title, content },
+              {
+                onSuccess: async () => {
+                  form.reset();
+                  await qc.invalidateQueries({
+                    queryKey: [{ name: 'notes' }],
+                  });
+                },
+                onError: () => {},
+              },
+            );
+          }}
+        >
+          <div
+            style={{
+              display: 'inline-flex',
+              flexDirection: 'column',
+              gap: 4,
+            }}
+          >
+            <label style={{ display: 'inline-flex', flexDirection: 'column' }}>
+              Title
+              <input required type="text" name="title" />
+            </label>
+            <label style={{ display: 'inline-flex', flexDirection: 'column' }}>
+              Content
+              <textarea required name="content" />
+            </label>
+            <button type="submit">Create Note</button>
+          </div>
+        </form>
+      </div>
+      <div>
+        <h2>Notes</h2>
+        {isLoading || isFetching ? <p>Freshing...</p> : null}
+        <ul
+          style={{
+            padding: 0,
+            margin: 0,
+          }}
+        >
+          {data?.records?.map((note) => (
+            <li
+              key={note.id}
+              style={{
+                listStyle: 'none',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  gap: 12,
+                  alignItems: 'center',
+                }}
+              >
+                <div>{note.id}</div>
+                <div>
+                  <h3>{note.title}</h3>
+                  <p>{note.content}</p>
+                </div>
+                <div>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      $delete.mutate({
+                        id: note.id,
+                      });
+                    }}
+                  >
+                    delete
+                  </button>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

examples/with-nextjs/src/app/layout.tsx

@@ -1,14 +1,16 @@
+import QueryClientProvider from './QueryClientProvider';
+
 export default function RootLayout({
   children,
 }: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <html lang="en" suppressHydrationWarning>
       <head>
         <title>My App</title>
       </head>
       <body>
-        {children}
+        <QueryClientProvider>{children}</QueryClientProvider>
       </body>
     </html>
-  )
-};
+  );
+}

examples/with-nextjs/src/lib/apiClient.ts

@@ -0,0 +1,80 @@
+'use client';
+
+import type { HttpApiRequest } from '@yme/api';
+import { ApiClient } from '@yme/api/client';
+import { replacePathParams } from '@yme/api/client/middleware';
+import { logger } from '@yme/api/middleware';
+import { z } from 'zod';
+
+export const api = new ApiClient<
+  HttpApiRequest & {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+  },
+  {}
+>({
+  action: async ({ req }) => {
+    const url = new URL(`/api/${req.url}`, window.location.origin);
+    let body: any = null;
+
+    if (req.method === 'GET') {
+      if (req.parsedInput) {
+        for (const [key, value] of Object.entries(req.parsedInput)) {
+          url.searchParams.append(key, String(value));
+        }
+      }
+    } else {
+      body = JSON.stringify(req.parsedInput);
+    }
+
+    const res = await fetch(url, {
+      method: req.method,
+      signal: req.signal,
+      headers: req.headers,
+      body,
+    });
+
+    if (!res.ok) {
+      throw new Error(res.statusText);
+    }
+
+    return await res.json();
+  },
+  middlewares: [logger(), replacePathParams()],
+});
+
+export type NoteType = {
+  id: number;
+  title: string;
+  content: string;
+};
+
+//
+export const notesApi = {
+  list: api
+    .get('notes')
+    .validator(
+      z.object({
+        page: z.number().default(1),
+        pageSize: z.number().default(10),
+      }),
+    )
+    .T<{ page: number; pageSize: number; records: NoteType[] }>(),
+  create: api
+    .post('notes')
+    .validator(
+      z.object({
+        title: z.string().min(1).max(255),
+        content: z.string().min(1).max(1024),
+      }),
+    )
+    .T<NoteType>(),
+  delete: api
+    .delete('notes')
+    .validator(
+      z.object({
+        id: z.number().int(),
+      }),
+    )
+    .T<void>(),
+};

examples/with-nextjs/src/lib/queryClient.ts

@@ -0,0 +1,30 @@
+
+import { QueryClient, isServer } from '@tanstack/react-query';
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+        retry: () => {
+          // todo retry
+          return false;
+        }
+      },
+    },
+  });
+}
+
+let queryClient: QueryClient | null = null;
+
+export function getQueryClient() {
+  if (isServer) {
+    return createQueryClient();
+  }
+
+  if (!queryClient) {
+    queryClient = createQueryClient();
+  }
+  return queryClient;
+}