Query for labels with library items. Display properly on the home feed

packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx

@@ -155,8 +155,8 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
         )}
       </HStack>
       <HStack css={{ mt: '8px' }}>
-        {props.item.labels?.map(({ description, color }, index) => (
-          <LabelChip key={index} text={description || ''} color={color} />
+        {props.item.labels?.map(({ name, color }, index) => (
+          <LabelChip key={index} text={name || ''} color={color} />
         ))}
       </HStack>
     </VStack>

packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx

@@ -6,7 +6,7 @@ import { articleFragment } from '../fragments/articleFragment'
 import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
-import { Label } from './../fragments/labelFragment'
+import { Label, labelFragment } from './../fragments/labelFragment'
 import { showErrorToast, showSuccessToast } from '../../toastHelpers'
 
 export type LibraryItemsQueryInput = {
@@ -67,6 +67,30 @@ export type PageInfo = {
   totalCount: number
 }
 
+const libraryItemFragment = gql`
+  fragment ArticleFields on Article {
+    id
+    title
+    url
+    author
+    image
+    savedAt
+    createdAt
+    publishedAt
+    contentReader
+    originalArticleUrl
+    readingProgressPercent
+    readingProgressAnchorIndex
+    slug
+    isArchived
+    description
+    linkId
+    labels {
+      ...LabelFields
+    }
+  }
+`
+
 export function useGetLibraryItemsQuery({
   limit,
   sortDescending,
@@ -109,7 +133,8 @@ export function useGetLibraryItemsQuery({
         }
       }
     }
-    ${articleFragment}
+    ${libraryItemFragment}
+    ${labelFragment}
   `
 
   const variables = {