refactor: create custom sandboxByPath fragment to reduce query payload

packages/app/src/app/graphql/types.ts

@@ -4636,6 +4636,20 @@ export type JoinEligibleWorkspaceMutation = {
   joinEligibleWorkspace: { __typename?: 'Team'; id: any };
 };
 
+export type RecentlyDeletedTeamSandboxesFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  isV2: boolean;
+  removedAt: string | null;
+  title: string | null;
+  collection: {
+    __typename?: 'Collection';
+    id: any | null;
+    path: string;
+  } | null;
+};
+
 export type RecentlyDeletedTeamSandboxesQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
 }>;
@@ -4651,50 +4665,59 @@ export type RecentlyDeletedTeamSandboxesQuery = {
         __typename?: 'Sandbox';
         id: string;
         alias: string | null;
-        title: string | null;
-        description: string | null;
-        lastAccessedAt: any;
-        insertedAt: string;
-        updatedAt: string;
-        removedAt: string | null;
-        privacy: number;
-        isFrozen: boolean;
-        screenshotUrl: string | null;
-        viewCount: number;
-        likeCount: number;
         isV2: boolean;
-        draft: boolean;
-        restricted: boolean;
-        authorId: any | null;
-        teamId: any | null;
-        source: { __typename?: 'Source'; template: string | null };
-        customTemplate: {
-          __typename?: 'Template';
-          id: any | null;
-          iconUrl: string | null;
-        } | null;
-        forkedTemplate: {
-          __typename?: 'Template';
-          id: any | null;
-          color: string | null;
-          iconUrl: string | null;
-        } | null;
+        removedAt: string | null;
+        title: string | null;
         collection: {
           __typename?: 'Collection';
-          path: string;
           id: any | null;
-        } | null;
-        author: { __typename?: 'User'; username: string } | null;
-        permissions: {
-          __typename?: 'SandboxProtectionSettings';
-          preventSandboxLeaving: boolean;
-          preventSandboxExport: boolean;
+          path: string;
         } | null;
       }>;
     } | null;
   } | null;
 };
 
+export type SandboxByPathFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  title: string | null;
+  insertedAt: string;
+  updatedAt: string;
+  screenshotUrl: string | null;
+  isV2: boolean;
+  isFrozen: boolean;
+  privacy: number;
+  restricted: boolean;
+  draft: boolean;
+  viewCount: number;
+  teamId: any | null;
+  source: { __typename?: 'Source'; template: string | null };
+  customTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  forkedTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    color: string | null;
+    iconUrl: string | null;
+  } | null;
+  collection: {
+    __typename?: 'Collection';
+    path: string;
+    id: any | null;
+  } | null;
+  author: { __typename?: 'User'; username: string } | null;
+  permissions: {
+    __typename?: 'SandboxProtectionSettings';
+    preventSandboxLeaving: boolean;
+    preventSandboxExport: boolean;
+  } | null;
+};
+
 export type SandboxesByPathQueryVariables = Exact<{
   path: Scalars['String'];
   teamId: InputMaybe<Scalars['ID']>;
@@ -4720,20 +4743,15 @@ export type SandboxesByPathQuery = {
         id: string;
         alias: string | null;
         title: string | null;
-        description: string | null;
-        lastAccessedAt: any;
         insertedAt: string;
         updatedAt: string;
-        removedAt: string | null;
-        privacy: number;
-        isFrozen: boolean;
         screenshotUrl: string | null;
-        viewCount: number;
-        likeCount: number;
         isV2: boolean;
-        draft: boolean;
+        isFrozen: boolean;
+        privacy: number;
         restricted: boolean;
-        authorId: any | null;
+        draft: boolean;
+        viewCount: number;
         teamId: any | null;
         source: { __typename?: 'Source'; template: string | null };
         customTemplate: {

packages/app/src/app/overmind/effects/gql/dashboard/queries.ts

@@ -60,6 +60,23 @@ import {
   githubRepoFragment,
 } from './fragments';
 
+const RECENTLY_DELETED_TEAM_SANDBOXES_FRAGMENT = gql`
+fragment recentlyDeletedTeamSandboxes on Sandbox {
+  id
+
+  alias
+
+  collection {
+    id
+    path
+  }
+
+  isV2
+  removedAt
+  title
+}
+`;
+
 export const deletedTeamSandboxes: Query<
   RecentlyDeletedTeamSandboxesQuery,
   RecentlyDeletedTeamSandboxesQueryVariables
@@ -73,12 +90,59 @@ export const deletedTeamSandboxes: Query<
           showDeleted: true
           orderBy: { field: "updated_at", direction: DESC }
         ) {
-          ...sandboxFragmentDashboard
+          ...recentlyDeletedTeamSandboxes
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${RECENTLY_DELETED_TEAM_SANDBOXES_FRAGMENT}
+`;
+
+const SANDBOX_BY_PATH_FRAGMENT = gql`
+  fragment sandboxByPath on Sandbox {
+    id
+    alias
+    title
+    insertedAt
+    updatedAt
+    screenshotUrl
+    isV2
+    isFrozen
+    privacy
+    restricted
+    draft
+    viewCount
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    forkedTemplate {
+      id
+      color
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
 `;
 
 export const sandboxesByPath: Query<
@@ -96,12 +160,12 @@ export const sandboxesByPath: Query<
         id
         path
         sandboxes {
-          ...sandboxFragmentDashboard
+          ...sandboxByPath
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${SANDBOX_BY_PATH_FRAGMENT}
   ${sidebarCollectionDashboard}
 `;
 

packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts

@@ -1,5 +1,8 @@
 import { Context } from 'app/overmind';
-import { SandboxFragmentDashboardFragment } from 'app/graphql/types';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+} from 'app/graphql/types';
 
 /**
  * Change sandbox frozen in state and returns the sandboxes that have changed in their old state
@@ -15,14 +18,14 @@ export const changeSandboxesInState = (
      * The mutation that happens on the sandbox, make sure to return a *new* sandbox here, to make sure
      * that we can still rollback easily in the future.
      */
-    sandboxMutation: <T extends SandboxFragmentDashboardFragment>(
+    sandboxMutation: <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment>(
       sandbox: T
     ) => T;
   }
 ) => {
   const changedSandboxes: Set<ReturnType<typeof sandboxMutation>> = new Set();
 
-  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment>(
+  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment>(
     sandbox: T
   ): T => {
     changedSandboxes.add(sandbox);
@@ -151,6 +154,13 @@ export const deleteSandboxesFromState = (
             repoSandbox.sandboxes = newSandboxes;
           }
         });
+      } else if (type === 'DELETED') {
+        const newSandboxes = sandboxStructure[type].filter(
+          sandbox => !ids.includes(sandbox.id)
+        );
+        if (newSandboxes.length !== sandboxStructure[type].length) {
+          dashboard.sandboxes[type] = newSandboxes;
+        }
       } else if (type !== 'RECENT_BRANCHES') {
         const newSandboxes = sandboxStructure[type].filter(sandboxFilter);
         if (newSandboxes.length !== sandboxStructure[type].length) {

packages/app/src/app/overmind/namespaces/dashboard/state.ts

@@ -1,11 +1,13 @@
 import {
   SandboxFragmentDashboardFragment as Sandbox,
+  SandboxByPathFragment,
   RepoFragmentDashboardFragment as Repo,
   TemplateFragmentDashboardFragment as Template,
   TeamFragmentDashboardFragment,
   BranchFragment as Branch,
   ProjectFragment as Repository,
   ProjectWithBranchesFragment as RepositoryWithBranches,
+  RecentlyDeletedTeamSandboxesFragment,
 } from 'app/graphql/types';
 import isSameWeek from 'date-fns/isSameWeek';
 import { sortBy } from 'lodash-es';
@@ -17,14 +19,14 @@ import { DELETE_ME_COLLECTION, OrderBy } from './types';
 export type DashboardSandboxStructure = {
   DRAFTS: Sandbox[] | null;
   TEMPLATES: Template[] | null;
-  DELETED: Sandbox[] | null;
+  DELETED: RecentlyDeletedTeamSandboxesFragment[] | null;
   RECENT_SANDBOXES: Sandbox[] | null;
   RECENT_BRANCHES: Branch[] | null;
   SEARCH: Sandbox[] | null;
   TEMPLATE_HOME: Template[] | null;
   SHARED: Sandbox[] | null;
   ALL: {
-    [path: string]: Sandbox[];
+    [path: string]: (Sandbox | SandboxByPathFragment)[];
   } | null;
   REPOS: {
     [path: string]: {
@@ -47,11 +49,11 @@ export type State = {
   viewMode: 'grid' | 'list';
   orderBy: OrderBy;
   getFilteredSandboxes: (
-    sandboxes: Array<Sandbox | Repo | Template['sandbox']>
+    sandboxes: Array<Sandbox | SandboxByPathFragment | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
   ) => Sandbox[];
   deletedSandboxesByTime: {
-    week: Sandbox[];
-    older: Sandbox[];
+    week: RecentlyDeletedTeamSandboxesFragment[];
+    older: RecentlyDeletedTeamSandboxesFragment[];
   };
   contributions: Branch[] | null;
   /**
@@ -104,8 +106,7 @@ export const state: State = {
         week: [],
         older: [],
       };
-    const noTemplateSandboxes = deletedSandboxes.filter(s => !s.customTemplate);
-    const timeSandboxes = noTemplateSandboxes.reduce(
+    const timeSandboxes = deletedSandboxes.reduce(
       (accumulator, currentValue) => {
         if (!currentValue.removedAt) return accumulator;
         if (isSameWeek(new Date(currentValue.removedAt), new Date())) {
@@ -137,7 +138,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | Template['sandbox']>
+      sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;
@@ -156,7 +157,7 @@ export const state: State = {
           return field.toLowerCase();
         }
 
-        if (orderField === 'views') {
+        if ('viewCount' in sandbox && orderField === 'views') {
           return sandbox.viewCount;
         }
 

packages/app/src/app/overmind/namespaces/profile/state.ts

@@ -2,6 +2,7 @@ import { Profile, Sandbox, UserSandbox } from '@codesandbox/common/lib/types';
 import {
   Collection,
   SandboxFragmentDashboardFragment as CollectionSandbox,
+  SandboxByPathFragment,
 } from 'app/graphql/types';
 import { Context } from 'app/overmind';
 import { derived } from 'overmind';
@@ -11,7 +12,7 @@ export type ProfileCollection = Pick<
   Collection,
   'id' | 'path' | 'sandboxCount'
 > & {
-  sandboxes: CollectionSandbox[];
+  sandboxes: (CollectionSandbox | SandboxByPathFragment)[];
 };
 
 type State = {