refactor: create custom sandboxByPath fragment to reduce query payload

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

@@ -4678,6 +4678,45 @@ export type RecentlyDeletedTeamSandboxesQuery = {
   } | 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;
+    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']>;
@@ -4703,20 +4742,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: {
@@ -4727,7 +4761,6 @@ export type SandboxesByPathQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {
@@ -4746,6 +4779,47 @@ export type SandboxesByPathQuery = {
   } | null;
 };
 
+export type DraftSandboxFragment = {
+  __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;
+  authorId: any | null;
+  lastAccessedAt: any;
+  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;
+    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 TeamDraftsQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
   authorId: InputMaybe<Scalars['UUID4']>;
@@ -4763,20 +4837,17 @@ export type TeamDraftsQuery = {
         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;
+        draft: boolean;
+        viewCount: number;
         authorId: any | null;
+        lastAccessedAt: any;
         teamId: any | null;
         source: { __typename?: 'Source'; template: string | null };
         customTemplate: {
@@ -4787,7 +4858,6 @@ export type TeamDraftsQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {

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

@@ -98,6 +98,52 @@ export const deletedTeamSandboxes: Query<
   ${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
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const sandboxesByPath: Query<
   SandboxesByPathQuery,
   SandboxesByPathQueryVariables
@@ -113,15 +159,63 @@ export const sandboxesByPath: Query<
         id
         path
         sandboxes {
-          ...sandboxFragmentDashboard
+          ...sandboxByPath
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${SANDBOX_BY_PATH_FRAGMENT}
   ${sidebarCollectionDashboard}
 `;
 
+const DRAFT_SANDBOX_FRAGMENT = gql`
+  fragment draftSandbox on Sandbox {
+    id
+    alias
+    title
+    insertedAt
+    updatedAt
+    screenshotUrl
+    isV2
+    isFrozen
+    privacy
+    restricted
+    draft
+    viewCount
+    authorId
+    lastAccessedAt
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    forkedTemplate {
+      id
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const getTeamDrafts: Query<
   TeamDraftsQuery,
   TeamDraftsQueryVariables
@@ -132,12 +226,12 @@ export const getTeamDrafts: Query<
 
       team(id: $teamId) {
         drafts(authorId: $authorId) {
-          ...sandboxFragmentDashboard
+          ...draftSandbox
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${DRAFT_SANDBOX_FRAGMENT}
 `;
 
 export const getCollections: Query<

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

@@ -6,6 +6,7 @@ import { uniq } from 'lodash-es';
 import {
   TemplateFragmentDashboardFragment,
   SandboxFragmentDashboardFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment,
   ProjectFragment,
 } from 'app/graphql/types';
@@ -192,7 +193,7 @@ export const createFolder = async (
 export const getDrafts = async ({ state, effects }: Context) => {
   const { dashboard, activeTeam } = state;
   try {
-    let sandboxes: SandboxFragmentDashboardFragment[] = [];
+    let sandboxes: (SandboxFragmentDashboardFragment | DraftSandboxFragment)[] = [];
 
     if (activeTeam) {
       const data = await effects.gql.queries.getTeamDrafts({

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

@@ -1,5 +1,9 @@
 import { Context } from 'app/overmind';
-import { SandboxFragmentDashboardFragment } from 'app/graphql/types';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+  DraftSandboxFragment,
+} from 'app/graphql/types';
 
 /**
  * Change sandbox frozen in state and returns the sandboxes that have changed in their old state
@@ -15,14 +19,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 | DraftSandboxFragment>(
       sandbox: T
     ) => T;
   }
 ) => {
   const changedSandboxes: Set<ReturnType<typeof sandboxMutation>> = new Set();
 
-  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment>(
+  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): T => {
     changedSandboxes.add(sandbox);
@@ -106,7 +110,7 @@ export const deleteSandboxesFromState = (
     ids: string[];
   }
 ) => {
-  const sandboxFilter = <T extends SandboxFragmentDashboardFragment>(
+  const sandboxFilter = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): boolean => !ids.includes(sandbox.id);
 

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

@@ -1,5 +1,7 @@
 import {
   SandboxFragmentDashboardFragment as Sandbox,
+  SandboxByPathFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment as Repo,
   TemplateFragmentDashboardFragment as Template,
   TeamFragmentDashboardFragment,
@@ -16,16 +18,16 @@ import { derived } from 'overmind';
 import { DELETE_ME_COLLECTION, OrderBy } from './types';
 
 export type DashboardSandboxStructure = {
-  DRAFTS: Sandbox[] | null;
+  DRAFTS: DraftSandboxFragment[] | null;
   TEMPLATES: Template[] | null;
   DELETED: RecentlyDeletedTeamSandboxesFragment[] | null;
-  RECENT_SANDBOXES: Sandbox[] | null;
+  RECENT_SANDBOXES: (Sandbox | DraftSandboxFragment)[] | null;
   RECENT_BRANCHES: Branch[] | null;
-  SEARCH: Sandbox[] | null;
+  SEARCH: (Sandbox | DraftSandboxFragment)[] | null;
   TEMPLATE_HOME: Template[] | null;
-  SHARED: Sandbox[] | null;
+  SHARED: (Sandbox | DraftSandboxFragment)[] | null;
   ALL: {
-    [path: string]: Sandbox[];
+    [path: string]: (Sandbox | SandboxByPathFragment | DraftSandboxFragment)[];
   } | null;
   REPOS: {
     [path: string]: {
@@ -48,7 +50,7 @@ export type State = {
   viewMode: 'grid' | 'list';
   orderBy: OrderBy;
   getFilteredSandboxes: (
-    sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
+    sandboxes: Array<Sandbox | SandboxByPathFragment | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
   ) => Sandbox[];
   deletedSandboxesByTime: {
     week: RecentlyDeletedTeamSandboxesFragment[];
@@ -137,7 +139,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
+      sandboxes: Array<Sandbox | SandboxByPathFragment | DraftSandboxFragment | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;