Merge pull request #187 from apollographql/fix-playlist-images

Allow playlist images to be `null`
apollographql · Apr 2, 2024 · e52b289 · e52b289
2 parents 3bc816d + 53a2415
commit e52b289
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 17 deletions.
diff --git a/client/schema.graphql b/client/schema.graphql
@@ -1402,7 +1402,7 @@ type Playlist {
   **Note**: If returned, the source URL for the image (`url`) is temporary and
   will expire in less than a day.
   """
-  images: [Image!]!
+  images: [Image!]
 
   """
   The name of the playlist.

diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx
@@ -176,7 +176,9 @@ const Sidebar = () => {
                 pinned={false}
                 key={playlist.id}
                 playlist={playlist}
-                coverPhoto={<CoverPhoto image={thumbnail(playlist.images)} />}
+                coverPhoto={
+                  <CoverPhoto image={thumbnail(playlist.images ?? [])} />
+                }
                 to={`/playlists/${playlist.id}`}
                 onMouseOverEdit={(playlist) =>
                   preloadPlaylistDetails({ id: playlist.id })

diff --git a/client/src/components/PlaylistDetailsModal.tsx b/client/src/components/PlaylistDetailsModal.tsx
@@ -80,7 +80,7 @@ const PlaylistDetails = ({ queryRef }: PlaylistDetailsProps) => {
     <Form form={form} className="flex gap-4">
       <CoverPhoto
         animateIn
-        image={playlist.images[0]}
+        image={(playlist.images ?? [])[0]}
         className="row-span-2 flex-1"
       />
       <div className="flex flex-col gap-4 flex-1">

diff --git a/client/src/components/PlaylistTile.tsx b/client/src/components/PlaylistTile.tsx
@@ -37,7 +37,7 @@ const PlaylistTile = ({ playlist }: PlaylistTileProps) => {
       }
     >
       <MediaTile to={`/playlists/${playlist.id}`}>
-        <MediaTile.CoverPhoto image={playlist.images[0]} />
+        <MediaTile.CoverPhoto image={(playlist.images ?? [])[0]} />
         <div className="flex flex-col">
           <MediaTile.Title>{playlist.name}</MediaTile.Title>
           <MediaTile.Details>

diff --git a/client/src/types/api.ts b/client/src/types/api.ts
@@ -986,7 +986,7 @@ export type Playlist = {
    * **Note**: If returned, the source URL for the image (`url`) is temporary and
    * will expire in less than a day.
    */
-  images: Array<Image>;
+  images: Maybe<Array<Image>>;
   /** The name of the playlist. */
   name: Scalars['String']['output'];
   /** The user who owns the playlist. */
@@ -2595,7 +2595,7 @@ export type SidebarQuery = {
           id: string;
           uri: string;
           name: string;
-          images: Array<{ __typename: 'Image'; url: string }>;
+          images: Array<{ __typename: 'Image'; url: string }> | null;
           owner: { __typename: 'User'; id: string; displayName: string | null };
         };
       }>;
@@ -2884,7 +2884,7 @@ export type PlaylistDetailsModalQuery = {
     id: string;
     name: string;
     description: string | null;
-    images: Array<{ __typename: 'Image'; url: string }>;
+    images: Array<{ __typename: 'Image'; url: string }> | null;
   } | null;
 };
 
@@ -2913,7 +2913,7 @@ export type PlaylistTile_playlist = {
   name: string;
   description: string | null;
   uri: string;
-  images: Array<{ __typename: 'Image'; url: string }>;
+  images: Array<{ __typename: 'Image'; url: string }> | null;
 };
 
 export type PlaylistTitleCell_playbackState = {
@@ -3635,7 +3635,7 @@ export type CollectionPlaylistsRouteQuery = {
           name: string;
           description: string | null;
           uri: string;
-          images: Array<{ __typename: 'Image'; url: string }>;
+          images: Array<{ __typename: 'Image'; url: string }> | null;
         };
       }>;
     } | null;
@@ -3666,7 +3666,7 @@ export type CollectionPlaylistsRoutePaginatedQuery = {
           name: string;
           description: string | null;
           uri: string;
-          images: Array<{ __typename: 'Image'; url: string }>;
+          images: Array<{ __typename: 'Image'; url: string }> | null;
         };
       }>;
     } | null;
@@ -3851,7 +3851,7 @@ export type IndexRouteQuery = {
         name: string;
         description: string | null;
         uri: string;
-        images: Array<{ __typename: 'Image'; url: string }>;
+        images: Array<{ __typename: 'Image'; url: string }> | null;
       };
     }>;
   } | null;
@@ -3876,7 +3876,7 @@ export type PlaylistQuery = {
       __typename: 'Image';
       url: string;
       vibrantColor: string | null;
-    }>;
+    }> | null;
     owner: { __typename: 'User'; id: string; displayName: string | null };
     tracks: {
       __typename: 'PlaylistTrackConnection';

diff --git a/shared/spotify-api/src/types.ts b/shared/spotify-api/src/types.ts
@@ -321,7 +321,7 @@ export namespace Spotify {
       followers: Followers;
       href: string;
       id: string;
-      images: Image[];
+      images: Image[] | null;
       name: string;
       owner: UserSimplified;
       primary_color: string | null;
@@ -338,7 +338,7 @@ export namespace Spotify {
       external_urls: ExternalUrl;
       href: string;
       id: string;
-      images: Image[];
+      images: Image[] | null;
       name: string;
       owner: User;
       primary_color: string | null;

diff --git a/subgraphs/spotify/schema.graphql b/subgraphs/spotify/schema.graphql
@@ -1484,7 +1484,7 @@ type Playlist @key(fields: "id") {
   **Note**: If returned, the source URL for the image (`url`) is temporary and
   will expire in less than a day.
   """
-  images: [Image!]!
+  images: [Image!]
 
   """
   The name of the playlist.

diff --git a/subgraphs/spotify/src/__generated__/resolvers-types.ts b/subgraphs/spotify/src/__generated__/resolvers-types.ts