release: v2.0.1

Fix(temp) cache issue
omsimos · Jul 2, 2024 · 0b3bd78 · 0b3bd78
2 parents 0ed7dfd + 0ef4886
commit 0b3bd78
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 42 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -14,6 +14,7 @@
     "@graphql-yoga/plugin-apq": "^3.4.0",
     "@graphql-yoga/plugin-csrf-prevention": "^3.4.0",
     "@graphql-yoga/plugin-disable-introspection": "^2.4.0",
+    "@graphql-yoga/plugin-response-cache": "^3.8.0",
     "@hookform/resolvers": "^3.3.4",
     "@lucia-auth/adapter-drizzle": "^1.0.7",
     "@mdx-js/loader": "^3.0.1",

diff --git a/apps/www/src/app/api/graphql/route.ts b/apps/www/src/app/api/graphql/route.ts
@@ -1,7 +1,9 @@
-import { getSession } from "@/lib/auth";
+import { cookies } from "next/headers";
 import { createYoga } from "graphql-yoga";
+import { getSession, lucia } from "@/lib/auth";
 import { useAPQ } from "@graphql-yoga/plugin-apq";
 import { gqlSchema, initContextCache } from "@umamin/gql";
+import { useResponseCache } from "@graphql-yoga/plugin-response-cache";
 import { useCSRFPrevention } from "@graphql-yoga/plugin-csrf-prevention";
 import { useDisableIntrospection } from "@graphql-yoga/plugin-disable-introspection";
 
@@ -21,7 +23,7 @@ const { handleRequest } = createYoga({
   cors: {
     origin:
       process.env.NODE_ENV === "production"
-        ? "https://v2.umamin.link"
+        ? "https://www.umamin.link"
         : "http://localhost:3000",
     credentials: true,
     methods: ["POST", "GET", "OPTIONS"],
@@ -31,6 +33,13 @@ const { handleRequest } = createYoga({
     useCSRFPrevention({
       requestHeaders: ["x-graphql-yoga-csrf"],
     }),
+    useResponseCache({
+      session: () => cookies().get(lucia.sessionCookieName)?.value,
+      ttl: 5_000,
+      ttlPerType: {
+        Note: 10_000,
+      },
+    }),
     useDisableIntrospection({
       isDisabled: () => process.env.NODE_ENV === "production",
     }),

diff --git a/apps/www/src/app/inbox/components/received/list.tsx b/apps/www/src/app/inbox/components/received/list.tsx
@@ -11,7 +11,7 @@ import { ReceivedMessagesResult } from "../../queries";
 import { Skeleton } from "@umamin/ui/components/skeleton";
 import { ReceivedMessageCard, receivedMessageFragment } from "./card";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), { ssr: false });
 
 const MESSAGES_FROM_CURSOR_QUERY = graphql(
   `
@@ -110,7 +110,11 @@ export function ReceivedMessagesList({
         </div>
       ))}
 
-      {isFetching && <Skeleton className="w-full h-[200px] rounded-lg" />}
+      {isFetching && (
+        <div className="container">
+          <Skeleton className="w-full h-[200px] rounded-lg" />
+        </div>
+      )}
       {hasMore && <div ref={ref}></div>}
     </>
   );

diff --git a/apps/www/src/app/inbox/components/received/messages.tsx b/apps/www/src/app/inbox/components/received/messages.tsx
@@ -1,13 +1,13 @@
+import { Suspense } from "react";
 import { cookies } from "next/headers";
-import { Suspense, cache } from "react";
 import { Skeleton } from "@umamin/ui/components/skeleton";
 
 import { lucia } from "@/lib/auth";
 import { getClient } from "@/lib/gql/rsc";
 import { ReceivedMessagesList } from "./list";
 import { RECEIVED_MESSAGES_QUERY } from "../../queries";
 
-const getMessages = cache(async () => {
+const getMessages = async () => {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
   if (!sessionId) {
     return null;
@@ -18,7 +18,7 @@ const getMessages = cache(async () => {
   });
 
   return res;
-});
+};
 
 export async function ReceivedMessages() {
   const result = await getMessages();

diff --git a/apps/www/src/app/inbox/components/sent/list.tsx b/apps/www/src/app/inbox/components/sent/list.tsx
@@ -11,7 +11,7 @@ import { SentMessageResult } from "../../queries";
 import { Skeleton } from "@umamin/ui/components/skeleton";
 import { sentMessageFragment, SentMessageCard } from "./card";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), { ssr: false });
 
 const MESSAGES_FROM_CURSOR_QUERY = graphql(
   `
@@ -110,7 +110,11 @@ export function SentMessagesList({
         </div>
       ))}
 
-      {isFetching && <Skeleton className="w-full h-[250px] rounded-lg" />}
+      {isFetching && (
+        <div className="container">
+          <Skeleton className="w-full h-[250px] rounded-lg" />
+        </div>
+      )}
       {hasMore && <div ref={ref}></div>}
     </>
   );

diff --git a/apps/www/src/app/inbox/components/sent/messages.tsx b/apps/www/src/app/inbox/components/sent/messages.tsx
@@ -1,4 +1,4 @@
-import { Suspense, cache } from "react";
+import { Suspense } from "react";
 import { cookies } from "next/headers";
 import { Skeleton } from "@umamin/ui/components/skeleton";
 
@@ -7,7 +7,7 @@ import { getClient } from "@/lib/gql/rsc";
 import { SentMessagesList } from "./list";
 import { SENT_MESSAGES_QUERY } from "../../queries";
 
-const getMessages = cache(async () => {
+const getMessages = async () => {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
 
   if (!sessionId) {
@@ -19,7 +19,7 @@ const getMessages = cache(async () => {
   });
 
   return res;
-});
+};
 
 export async function SentMessages() {
   const result = await getMessages();

diff --git a/apps/www/src/app/notes/components/list.tsx b/apps/www/src/app/notes/components/list.tsx
@@ -11,7 +11,7 @@ import { NoteCard } from "./card";
 import { NoteQueryResult } from "../queries";
 import { Skeleton } from "@umamin/ui/components/skeleton";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), { ssr: false });
 
 const NOTES_FROM_CURSOR_QUERY = graphql(`
   query NotesFromCursor($cursor: NotesFromCursorInput!) {
@@ -115,7 +115,11 @@ export function NotesList({ currentUserId, notes }: Props) {
           </div>
         ))}
 
-      {isFetching && <Skeleton className="w-full h-[200px] rounded-lg" />}
+      {isFetching && (
+        <div className="container">
+          <Skeleton className="w-full h-[150px] rounded-lg" />
+        </div>
+      )}
       {hasMore && <div ref={ref}></div>}
     </>
   );

diff --git a/apps/www/src/app/notes/page.tsx b/apps/www/src/app/notes/page.tsx
@@ -11,7 +11,9 @@ import { getSession, lucia } from "@/lib/auth";
 import { Button } from "@umamin/ui/components/button";
 import { NOTES_QUERY, CURRENT_NOTE_QUERY } from "./queries";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), {
+  ssr: false,
+});
 
 export const metadata = {
   title: "Umamin — Notes",

diff --git a/apps/www/src/app/to/[username]/components/chat-form.tsx b/apps/www/src/app/to/[username]/components/chat-form.tsx
@@ -17,8 +17,7 @@ import { UserByUsernameQueryResult } from "../queries";
 const CREATE_MESSAGE_MUTATION = graphql(`
   mutation CreateMessage($input: CreateMessageInput!) {
     createMessage(input: $input) {
-      id
-      content
+      __typename
     }
   }
 `);

diff --git a/apps/www/src/app/to/[username]/page.tsx b/apps/www/src/app/to/[username]/page.tsx
@@ -1,4 +1,3 @@
-import { cache } from "react";
 import dynamic from "next/dynamic";
 import { redirect } from "next/navigation";
 import { BadgeCheck, Lock, MessageCircleOff } from "lucide-react";
@@ -10,10 +9,13 @@ import { USER_BY_USERNAME_QUERY } from "./queries";
 import { ShareButton } from "@/app/components/share-button";
 import { Card, CardHeader } from "@umamin/ui/components/card";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), {
+  ssr: false,
+});
 
 const UnauthenticatedDialog = dynamic(
   () => import("./components/unauthenticated"),
+  { ssr: false },
 );
 
 export async function generateMetadata({
@@ -53,22 +55,16 @@ export async function generateMetadata({
   };
 }
 
-const getUser = cache(async (username: string) => {
-  const res = await getClient().query(USER_BY_USERNAME_QUERY, {
-    username,
-  });
-
-  return res;
-});
-
 export default async function SendMessage({
   params,
 }: {
   params: { username: string };
 }) {
   const { session } = await getSession();
+  const result = await getClient().query(USER_BY_USERNAME_QUERY, {
+    username: params.username,
+  });
 
-  const result = await getUser(params.username);
   const user = result.data?.userByUsername;
 
   if (!user) {

diff --git a/apps/www/src/app/user/[username]/page.tsx b/apps/www/src/app/user/[username]/page.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { cache } from "react";
 import { graphql } from "gql.tada";
 import dynamic from "next/dynamic";
 import { redirect } from "next/navigation";
@@ -10,7 +9,7 @@ import { cn } from "@umamin/ui/lib/utils";
 import { UserCard } from "@/app/components/user-card";
 import { Button, buttonVariants } from "@umamin/ui/components/button";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+const AdContainer = dynamic(() => import("@umamin/ui/ad"), { ssr: false });
 
 const USER_BY_USERNAME_QUERY = graphql(`
   query UserByUsername($username: String!) {
@@ -68,20 +67,15 @@ export async function generateMetadata({
   };
 }
 
-const getUser = cache(async (username: string) => {
-  const res = await getClient().query(USER_BY_USERNAME_QUERY, {
-    username,
-  });
-
-  return res;
-});
-
 export default async function Page({
   params,
 }: {
   params: { username: string };
 }) {
-  const result = await getUser(params.username);
+  const result = await getClient().query(USER_BY_USERNAME_QUERY, {
+    username: params.username,
+  });
+
   const user = result.data?.userByUsername;
 
   if (!user) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml