docs(swr): add example incrementing a value

vvo · Jun 14, 2024 · 7dbca00 · 7dbca00
1 parent baf6e0f
commit 7dbca00
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 3 deletions.
diff --git a/...es/next/src/app/app-router-client-component-redirect-route-handler-fetch/session/route.ts b/...es/next/src/app/app-router-client-component-redirect-route-handler-fetch/session/route.ts
@@ -31,7 +31,6 @@ export async function POST(request: NextRequest) {
 export async function GET(request: NextRequest) {
   const session = await getIronSession<SessionData>(cookies(), sessionOptions);
 
-  console.log(new URL(request.url).searchParams);
   const action = new URL(request.url).searchParams.get("action");
   // /app-router-client-component-redirect-route-handler-fetch/session?action=logout
   if (action === "logout") {

diff --git a/examples/next/src/app/app-router-client-component-route-handler-swr/form.tsx b/examples/next/src/app/app-router-client-component-route-handler-swr/form.tsx
@@ -5,7 +5,7 @@ import useSession from "./use-session";
 import { defaultSession } from "./lib";
 
 export function Form() {
-  const { session, isLoading } = useSession();
+  const { session, isLoading, increment } = useSession();
 
   if (isLoading) {
     return <p className="text-lg">Loading...</p>;
@@ -16,6 +16,21 @@ export function Form() {
       <>
         <p className="text-lg">
           Logged in user: <strong>{session.username}</strong>
+          &nbsp;
+          <button
+            className={css.button}
+            onClick={() => {
+              increment(null, {
+                optimisticData: {
+                  ...session,
+                  counter: session.counter + 1,
+                },
+                revalidate: false,
+              });
+            }}
+          >
+            {session.counter}
+          </button>
         </p>
         <LogoutButton />
       </>
@@ -38,6 +53,7 @@ function LoginForm() {
           optimisticData: {
             isLoggedIn: true,
             username,
+            counter: 0,
           },
         });
       }}

diff --git a/examples/next/src/app/app-router-client-component-route-handler-swr/lib.ts b/examples/next/src/app/app-router-client-component-route-handler-swr/lib.ts
@@ -3,11 +3,13 @@ import { SessionOptions } from "iron-session";
 export interface SessionData {
   username: string;
   isLoggedIn: boolean;
+  counter: number;
 }
 
 export const defaultSession: SessionData = {
   username: "",
   isLoggedIn: false,
+  counter: 0,
 };
 
 export const sessionOptions: SessionOptions = {

diff --git a/examples/next/src/app/app-router-client-component-route-handler-swr/session/route.ts b/examples/next/src/app/app-router-client-component-route-handler-swr/session/route.ts
@@ -14,6 +14,7 @@ export async function POST(request: NextRequest) {
 
   session.isLoggedIn = true;
   session.username = username;
+  session.counter = 0;
   await session.save();
 
   // simulate looking up the user in db
@@ -22,6 +23,23 @@ export async function POST(request: NextRequest) {
   return Response.json(session);
 }
 
+export async function PATCH() {
+  const session = await getIronSession<SessionData>(cookies(), sessionOptions);
+
+  session.counter++;
+  session.updateConfig({
+    ...sessionOptions,
+    cookieOptions: {
+      ...sessionOptions.cookieOptions,
+      expires: new Date("2024-12-27T00:00:00.000Z"),
+      maxAge: undefined,
+    },
+  });
+  await session.save();
+
+  return Response.json(session);
+}
+
 // read session
 export async function GET() {
   const session = await getIronSession<SessionData>(cookies(), sessionOptions);

diff --git a/examples/next/src/app/app-router-client-component-route-handler-swr/use-session.ts b/examples/next/src/app/app-router-client-component-route-handler-swr/use-session.ts
@@ -31,6 +31,12 @@ function doLogout(url: string) {
   });
 }
 
+function doIncrement(url: string) {
+  return fetchJson<SessionData>(url, {
+    method: "PATCH",
+  });
+}
+
 export default function useSession() {
   const { data: session, isLoading } = useSWR(
     sessionApiRoute,
@@ -45,6 +51,7 @@ export default function useSession() {
     revalidate: false,
   });
   const { trigger: logout } = useSWRMutation(sessionApiRoute, doLogout);
+  const { trigger: increment } = useSWRMutation(sessionApiRoute, doIncrement);
 
-  return { session, logout, login, isLoading };
+  return { session, logout, login, increment, isLoading };
 }