Load views on user load and read in cache (#3552)

* WIP

* Poc

* Use cached root query + remove proloaded views state

* Fix storybook test + fix codegen

* Return default schema if token is absent, unauthenticated if token is invalid

* Use enum instead of bool

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
 import { useSetRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { GET_CURRENT_USER_AND_VIEWS } from '@/users/graphql/queries/getCurrentUserAndViews';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
-import { useGetCurrentUserQuery } from '~/generated/graphql';
 
 export const UserProvider = ({ children }: React.PropsWithChildren) => {
   const [isLoading, setIsLoading] = useState(true);
@@ -16,16 +17,18 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
     currentWorkspaceMemberState,
   );
 
-  const { data: userData, loading: userLoading } = useGetCurrentUserQuery({});
+  const { loading: queryLoading, data: queryData } = useQuery(
+    GET_CURRENT_USER_AND_VIEWS,
+  );
 
   useEffect(() => {
-    if (!userLoading) {
+    if (!queryLoading) {
       setIsLoading(false);
     }
-    if (userData?.currentUser?.workspaceMember) {
-      setCurrentUser(userData.currentUser);
-      setCurrentWorkspace(userData.currentUser.defaultWorkspace);
-      const workspaceMember = userData.currentUser.workspaceMember;
+    if (queryData?.currentUser?.workspaceMember) {
+      setCurrentUser(queryData.currentUser);
+      setCurrentWorkspace(queryData.currentUser.defaultWorkspace);
+      const workspaceMember = queryData.currentUser.workspaceMember;
       setCurrentWorkspaceMember({
         ...workspaceMember,
         colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
@@ -34,10 +37,10 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
   }, [
     setCurrentUser,
     isLoading,
-    userLoading,
+    queryLoading,
     setCurrentWorkspace,
     setCurrentWorkspaceMember,
-    userData?.currentUser,
+    queryData?.currentUser,
   ]);
 
   return isLoading ? <></> : <>{children}</>;

packages/twenty-front/src/modules/users/graphql/queries/getCurrentUser.ts

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_CURRENT_USER = gql`
-  query GetCurrentUser {
-    currentUser {
-      ...UserQueryFragment
-    }
-  }
-`;

packages/twenty-front/src/modules/users/graphql/queries/getCurrentUserAndViews.ts

@@ -0,0 +1,103 @@
+// This query cannot be put in the graphQL folder because it cannot be generated by the graphQL codegen.
+import { gql } from '@apollo/client';
+
+export const GET_CURRENT_USER_AND_VIEWS = gql`
+  query GetCurrentUserAndViews {
+    currentUser {
+      id
+      firstName
+      lastName
+      email
+      canImpersonate
+      supportUserHash
+      workspaceMember {
+        id
+        name {
+          firstName
+          lastName
+        }
+        colorScheme
+        avatarUrl
+        locale
+      }
+      defaultWorkspace {
+        id
+        displayName
+        logo
+        domainName
+        inviteHash
+        allowImpersonation
+        subscriptionStatus
+        featureFlags {
+          id
+          key
+          value
+          workspaceId
+        }
+      }
+    }
+    views {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      edges {
+        cursor
+        node {
+          id
+          createdAt
+          updatedAt
+          name
+          objectMetadataId
+          type
+          deletedAt
+          viewFilters {
+            edges {
+              cursor
+              node {
+                id
+                createdAt
+                updatedAt
+                fieldMetadataId
+                operand
+                value
+                displayValue
+                deletedAt
+              }
+            }
+          }
+          viewSorts {
+            edges {
+              cursor
+              node {
+                id
+                createdAt
+                updatedAt
+                fieldMetadataId
+                direction
+                deletedAt
+              }
+            }
+          }
+          viewFields {
+            edges {
+              cursor
+              node {
+                id
+                createdAt
+                updatedAt
+                fieldMetadataId
+                isVisible
+                size
+                position
+                deletedAt
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;