refactor: create custom sandboxByPath fragment to reduce query payload

Author: tristandubbeld

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

@@ -4678,6 +4678,46 @@ 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;
+    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']>;
@@ -4703,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

@@ -98,6 +98,53 @@ 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
+      color
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const sandboxesByPath: Query<
   SandboxesByPathQuery,
   SandboxesByPathQueryVariables
@@ -113,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);

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

@@ -1,5 +1,6 @@
 import {
   SandboxFragmentDashboardFragment as Sandbox,
+  SandboxByPathFragment,
   RepoFragmentDashboardFragment as Repo,
   TemplateFragmentDashboardFragment as Template,
   TeamFragmentDashboardFragment,
@@ -25,7 +26,7 @@ export type DashboardSandboxStructure = {
   TEMPLATE_HOME: Template[] | null;
   SHARED: Sandbox[] | null;
   ALL: {
-    [path: string]: Sandbox[];
+    [path: string]: (Sandbox | SandboxByPathFragment)[];
   } | null;
   REPOS: {
     [path: string]: {
@@ -48,7 +49,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[];

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 = {

packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx

@@ -13,7 +13,10 @@ import {
 import designLanguage from '@codesandbox/components/lib/design-language/theme';
 import css from '@styled-system/css';
 import { Sandbox } from '@codesandbox/common/lib/types';
-import { SandboxFragmentDashboardFragment } from 'app/graphql/types';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+} from 'app/graphql/types';
 import { SandboxType } from '../constants';
 
 const PrivacyIcons = {
@@ -29,7 +32,7 @@ const privacyToName = {
 };
 
 export const SandboxCard: React.FC<{
-  sandbox: Sandbox | SandboxFragmentDashboardFragment;
+  sandbox: Sandbox | SandboxFragmentDashboardFragment | SandboxByPathFragment;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }> = ({ sandbox, onClick }) => {
   const { contextMenu } = useAppState().profile;

packages/app/src/app/pages/Profile/SandboxPicker/index.tsx

@@ -10,6 +10,10 @@ import {
   Column,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+} from 'app/graphql/types';
 import { SandboxCard, SkeletonCard } from './SandboxCard';
 import { FolderCard } from './FolderCard';
 import { ProfileCollectionType } from '../constants';
@@ -53,7 +57,7 @@ export const SandboxPicker: React.FC<{ closeModal?: () => void }> = ({
     .filter(collection => collection.parent === selectedPath)
     .filter(collection => collection.path !== selectedPath);
 
-  const sandboxesInPath =
+  const sandboxesInPath: (SandboxFragmentDashboardFragment | SandboxByPathFragment)[] =
     collections.find(collection => collection.path === selectedPath)
       ?.sandboxes || [];