fix: resolve cache issue in profile

joshxfi · Apr 24, 2024 · cc39da4 · cc39da4
1 parent 5045228
commit cc39da4
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 956 deletions.
diff --git a/src/app/dashboard/components/profile/sidebar.tsx b/src/app/dashboard/components/profile/sidebar.tsx
@@ -1,7 +1,7 @@
 import { FragmentOf, graphql, readFragment } from "gql.tada";
 
 import { EditIcon } from "@/components/icons";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 
 import { OrgSheet } from "../org-sheet";
 import { PaymentMethod } from "../payment-method";
@@ -38,7 +38,7 @@ export function ProfileSidebar({
   const data = readFragment(SidebarFields, user);
 
   return (
-    <aside className="w-2/3 space-y-4">
+    <aside className="w-2/3 space-y-4 hidden lg:block">
       <div className="p-6 bg-white shadow-sm rounded-md items-center">
         <div className="flex justify-between mb-2">
           <h3 className="text-base font-semibold">About</h3>

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -35,6 +35,18 @@ const GetUserQuery = graphql(
   [BannerFields, PostFields, SidebarFields],
 );
 
+const GetPostsQuery = graphql(
+  `
+    query GetPosts {
+      posts {
+        id
+        ...PostFields
+      }
+    }
+  `,
+  [PostFields],
+);
+
 function Profile() {
   const { data: session } = useSession();
 
@@ -46,19 +58,24 @@ function Profile() {
     pause: !session?.user.id,
   });
 
+  const [posts] = useQuery({
+    query: GetPostsQuery,
+    pause: !session?.user.id,
+  });
+
   return (
     <section className="max-w-screen-lg mx-auto">
       {result.data?.getUser && (
         <>
           <ProfileBanner user={result.data.getUser} />
 
-          <div className="flex space-x-4">
+          <div className="flex lg:space-x-4">
             <ProfileSidebar user={result.data?.getUser} />
 
             <div className="w-full space-y-4">
               <PostForm />
               <div className="space-y-4 w-full">
-                {result.data?.getUser.posts.map((post) => (
+                {posts.data?.posts.map((post) => (
                   <Post key={post.id} post={post} />
                 ))}
               </div>