[Demo] Update app to use data masking

client/package.json

@@ -6,7 +6,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.5",
+    "@apollo/client": "^3.12.0-rc.1",
     "@apollo/persisted-query-lists": "^1.0.0",
     "@radix-ui/react-context-menu": "^2.1.3",
     "@radix-ui/react-dialog": "^1.0.3",

client/src/@types/@apollo/client.d.ts

@@ -0,0 +1,7 @@
+import '@apollo/client';
+
+declare module '@apollo/client' {
+  interface DataMasking {
+    enabled: true;
+  }
+}

client/src/apollo/client.ts

@@ -74,6 +74,7 @@ const httpLink = createHttpLink({
 });
 
 const client = new ApolloClient({
+  dataMasking: true,
   link: from([httpAuthLink, persistedQueries, httpLink]),
   connectToDevTools: true,
   name: 'Spotify Showcase Website',

client/src/components/AlbumTile.tsx

@@ -1,15 +1,20 @@
-import { gql } from '@apollo/client';
-import { AlbumTile_album as Album } from '../types/api';
+import {
+  FragmentType,
+  TypedDocumentNode,
+  gql,
+  useFragment,
+} from '@apollo/client';
+import { AlbumTile_album } from '../types/api';
 import { capitalize } from '../utils/string';
 import { yearOfRelease } from '../utils/releaseDate';
 import MediaTile from './MediaTile';
 import { fragmentRegistry } from '../apollo/fragmentRegistry';
 
 interface AlbumTileProps {
-  album: Album;
+  album: FragmentType<AlbumTile_album>;
 }
 
-fragmentRegistry.register(gql`
+const AlbumTileFragment: TypedDocumentNode<AlbumTile_album> = gql`
   fragment AlbumTile_album on Album {
     id
     name
@@ -22,17 +27,28 @@ fragmentRegistry.register(gql`
       url
     }
   }
-`);
+`;
+
+fragmentRegistry.register(AlbumTileFragment);
 
 const AlbumTile = ({ album }: AlbumTileProps) => {
+  const { data, complete } = useFragment({
+    fragment: AlbumTileFragment,
+    from: album,
+  });
+
+  if (!complete) {
+    return null;
+  }
+
   return (
-    <MediaTile to={`/albums/${album.id}`}>
-      <MediaTile.CoverPhoto image={album.images[0]} />
+    <MediaTile to={`/albums/${data.id}`}>
+      <MediaTile.CoverPhoto image={data.images[0]} />
       <div className="flex flex-col">
-        <MediaTile.Title>{album.name}</MediaTile.Title>
+        <MediaTile.Title>{data.name}</MediaTile.Title>
         <MediaTile.Details>
-          <span>{yearOfRelease(album.releaseDate)}</span>
-          <span>{capitalize(album.albumType.toLowerCase())}</span>
+          <span>{yearOfRelease(data.releaseDate)}</span>
+          <span>{capitalize(data.albumType.toLowerCase())}</span>
         </MediaTile.Details>
       </div>
     </MediaTile>

client/src/components/AlbumTrackTitleCell.tsx

@@ -1,7 +1,14 @@
-import { gql } from '@apollo/client';
+import {
+  FragmentType,
+  TypedDocumentNode,
+  gql,
+  useFragment,
+} from '@apollo/client';
 import usePlaybackState from '../hooks/usePlaybackState';
 import {
   AlbumTrackTitleCell_album as Album,
+  AlbumTrackTitleCell_album,
+  AlbumTrackTitleCell_track,
   AlbumTrackTitleCell_playbackState as PlaybackState,
   AlbumTrackTitleCell_track as Track,
 } from '../types/api';
@@ -12,8 +19,8 @@ import Flex from './Flex';
 import { fragmentRegistry } from '../apollo/fragmentRegistry';
 
 interface AlbumTrackTitleCellProps {
-  album: Album;
-  track: Track;
+  album: FragmentType<Album>;
+  track: FragmentType<Track>;
 }
 
 const PLAYBACK_STATE_FRAGMENT = gql`
@@ -28,11 +35,13 @@ const PLAYBACK_STATE_FRAGMENT = gql`
   }
 `;
 
-fragmentRegistry.register(gql`
+const AlbumTrackTitleCellAlbumFragment: TypedDocumentNode<AlbumTrackTitleCell_album> = gql`
   fragment AlbumTrackTitleCell_album on Album {
     uri
   }
+`;
 
+const AlbumTrackTitleCellTrackFragment: TypedDocumentNode<AlbumTrackTitleCell_track> = gql`
   fragment AlbumTrackTitleCell_track on Track {
     id
     name
@@ -43,28 +52,46 @@ fragmentRegistry.register(gql`
       name
     }
   }
-`);
+`;
+
+fragmentRegistry.register(
+  AlbumTrackTitleCellAlbumFragment,
+  AlbumTrackTitleCellTrackFragment
+);
 
 const AlbumTrackTitleCell = ({ album, track }: AlbumTrackTitleCellProps) => {
+  const { data: albumData, complete: albumComplete } = useFragment({
+    fragment: AlbumTrackTitleCellAlbumFragment,
+    from: album,
+  });
+  const { data: trackData, complete: trackComplete } = useFragment({
+    fragment: AlbumTrackTitleCellTrackFragment,
+    from: track,
+  });
+
   const playbackState = usePlaybackState<PlaybackState>({
     fragment: PLAYBACK_STATE_FRAGMENT,
   });
 
-  const isPlayingInAlbum = playbackState?.context?.uri === album.uri;
-  const isCurrentTrack = track.uri === playbackState?.item?.uri;
+  if (!trackComplete || !albumComplete) {
+    return null;
+  }
+
+  const isPlayingInAlbum = playbackState?.context?.uri === albumData.uri;
+  const isCurrentTrack = trackData.uri === playbackState?.item?.uri;
 
   return (
     <Flex direction="column" gap="0.5">
       <span
         className="text-base"
         color={isCurrentTrack && isPlayingInAlbum ? 'themeLight' : 'primary'}
       >
-        {track.name}
+        {trackData.name}
       </span>
       <Flex gap="0.5rem" alignItems="center">
-        {track.explicit && <ExplicitBadge />}
+        {trackData.explicit && <ExplicitBadge />}
         <CommaSeparatedList>
-          {track.artists.map((artist) => (
+          {trackData.artists.map((artist) => (
             <EntityLink
               className="text-muted transition-colors duration-[0.15s] hover:text-primary"
               key={artist.id}

client/src/components/AlbumTracksTable.tsx

@@ -1,4 +1,9 @@
-import { gql } from '@apollo/client';
+import {
+  FragmentType,
+  TypedDocumentNode,
+  gql,
+  useFragment,
+} from '@apollo/client';
 import { createColumnHelper } from '@tanstack/react-table';
 import { Clock } from 'lucide-react';
 import { Get } from 'type-fest';
@@ -17,15 +22,15 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry';
 type Track = NonNullable<Get<Album, 'tracks.edges[0].node'>>;
 
 interface AlbumTracksTableProps {
-  album: Album;
+  album: FragmentType<Album>;
   tracksContains: Map<string, boolean>;
 }
 
 interface AlbumTracksTableMeta {
   tracksContains: Map<string, boolean>;
 }
 
-fragmentRegistry.register(gql`
+const AlbumTracksTableFragment: TypedDocumentNode<Album> = gql`
   fragment AlbumTracksTable_album on Album {
     id
     uri
@@ -35,90 +40,104 @@ fragmentRegistry.register(gql`
           id
           uri
           durationMs
-          trackNumber
           artists {
             id
+            name
           }
 
           ...AlbumTrackTitleCell_track
+          ...TrackNumberCell_track
         }
       }
     }
 
     ...AlbumTrackTitleCell_album
   }
-`);
+`;
+
+fragmentRegistry.register(AlbumTracksTableFragment);
 
 const columnHelper = createColumnHelper<Track>();
 
 const AlbumTracksTable = ({ album, tracksContains }: AlbumTracksTableProps) => {
+  const { data, complete } = useFragment({
+    fragment: AlbumTracksTableFragment,
+    from: album,
+  });
   const [resumePlayback] = useResumePlaybackMutation();
 
   const columns = useMemo(
-    () => [
-      columnHelper.accessor((track) => track, {
-        header: '#',
-        meta: { shrink: true },
-        cell: (info) => {
-          return (
-            <TrackNumberCell
-              context={album}
-              track={info.getValue()}
-              position={info.row.index}
-            />
-          );
-        },
-      }),
-      columnHelper.display({
-        id: 'title',
-        header: 'Title',
-        cell: (info) => {
-          return (
-            <AlbumTrackTitleCell album={album} track={info.row.original} />
-          );
-        },
-      }),
-      columnHelper.display({
-        id: 'liked',
-        header: '',
-        cell: (info) => {
-          const { tracksContains } = info.table.options
-            .meta as unknown as AlbumTracksTableMeta;
-
-          const track = info.row.original;
-          const liked = tracksContains.get(track.id) ?? false;
-
-          return <TrackLikeButtonCell liked={liked} track={track} />;
-        },
-        meta: {
-          shrink: true,
-        },
-      }),
-      columnHelper.accessor('durationMs', {
-        header: () => <Clock size="1rem" />,
-        cell: (info) => <Duration durationMs={info.getValue()} />,
-        meta: {
-          headerAlign: 'right',
-          shrink: true,
-        },
-      }),
-    ],
-    [album]
+    () =>
+      complete
+        ? [
+            columnHelper.accessor((track) => track, {
+              header: '#',
+              meta: { shrink: true },
+              cell: (info) => {
+                return (
+                  <TrackNumberCell
+                    context={data}
+                    track={info.getValue()}
+                    position={info.row.index}
+                  />
+                );
+              },
+            }),
+            columnHelper.display({
+              id: 'title',
+              header: 'Title',
+              cell: (info) => {
+                return (
+                  <AlbumTrackTitleCell album={data} track={info.row.original} />
+                );
+              },
+            }),
+            columnHelper.display({
+              id: 'liked',
+              header: '',
+              cell: (info) => {
+                const { tracksContains } = info.table.options
+                  .meta as unknown as AlbumTracksTableMeta;
+
+                const track = info.row.original;
+                const liked = tracksContains.get(track.id) ?? false;
+
+                return <TrackLikeButtonCell liked={liked} track={track} />;
+              },
+              meta: {
+                shrink: true,
+              },
+            }),
+            columnHelper.accessor('durationMs', {
+              header: () => <Clock size="1rem" />,
+              cell: (info) => <Duration durationMs={info.getValue()} />,
+              meta: {
+                headerAlign: 'right',
+                shrink: true,
+              },
+            }),
+          ]
+        : [],
+    [data, complete]
   );
 
+  if (!complete) {
+    return null;
+  }
+
   return (
     <Table
       enableRowSelection
       enableMultiSelect
       enableRangeSelect
       columns={columns}
-      data={album.tracks?.edges.map((edge) => edge.node) ?? []}
+      data={data.tracks?.edges.map((edge) => edge.node) ?? []}
       meta={{ tracksContains }}
       onDoubleClickRow={(row) => {
         const track = row.original;
 
         resumePlayback({
-          contextUri: album.uri,
+          contextUri: data.uri,
           offset: { uri: track.uri },
         });
       }}
@@ -165,7 +184,7 @@ const AlbumTracksTable = ({ album, tracksContains }: AlbumTracksTableProps) => {
               Share
             </ContextMenu.SubMenu>
             <ContextMenu.Separator />
-            <ContextMenuAction.OpenDesktopApp uri={track.uri} context={album} />
+            <ContextMenuAction.OpenDesktopApp uri={track.uri} context={data} />
           </>
         );
       }}