fix: fragments to use pagination nodes accessor

PHILLIPS71 · May 31, 2024 · 39927b5 · 39927b5
1 parent 79c87ff
commit 39927b5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/app/src/components/interfaces/encode/widgets/EncodeSizeWidget.tsx b/app/src/components/interfaces/encode/widgets/EncodeSizeWidget.tsx
@@ -10,8 +10,10 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 const FRAGMENT = graphql`
   fragment EncodeSizeWidgetFragment on Encode {
     snapshots {
-      size
-      created_at
+      nodes {
+        size
+        created_at
+      }
     }
   }
 `
@@ -24,18 +26,18 @@ const EncodeSizeWidget: React.FC<EncodeSizeWidgetProps> = ({ $key }) => {
   const data = useFragment(FRAGMENT, $key)
 
   const bars = React.useMemo(() => {
-    const snapshots = data.snapshots.toSorted((a, b) => a.created_at - b.created_at)
+    const snapshots = data.snapshots?.nodes?.toSorted((a, b) => a.created_at - b.created_at)
 
     const output = [
       {
         name: 'Original',
-        size: snapshots.at(0)?.size,
+        size: snapshots?.at(0)?.size,
         fill: 'hsl(var(--twc-info) / 0.2)',
         stroke: 'hsl(var(--twc-info))',
       },
       {
         name: 'New',
-        size: snapshots.length === 1 ? 0 : snapshots.at(snapshots.length - 1)?.size,
+        size: snapshots?.length === 1 ? 0 : snapshots?.at(snapshots.length - 1)?.size,
         fill: 'hsl(var(--twc-brand) / 0.2)',
         stroke: 'hsl(var(--twc-brand))',
       },
@@ -78,6 +80,7 @@ const EncodeSizeWidget: React.FC<EncodeSizeWidgetProps> = ({ $key }) => {
           tickFormatter={(tick) => filesize(tick, { base: 2 })}
           type="number"
         />
+
         <YAxis
           dataKey="name"
           fontSize={14}

diff --git a/app/src/components/interfaces/explore/table/ExploreTable.tsx b/app/src/components/interfaces/explore/table/ExploreTable.tsx
@@ -16,14 +16,16 @@ const FRAGMENT = graphql`
   @argumentDefinitions(order: { type: "[FileSystemEntrySortInput!]" }) {
     scanned_at
     entries(order: $order) {
-      __typename
-      id
-      size
-      ... on FileSystemDirectory {
-        ...ExploreTableDirectoryFragment
-      }
-      ... on FileSystemFile {
-        ...ExploreTableFileFragment
+      nodes {
+        __typename
+        id
+        size
+        ... on FileSystemDirectory {
+          ...ExploreTableDirectoryFragment
+        }
+        ... on FileSystemFile {
+          ...ExploreTableFileFragment
+        }
       }
     }
   }
@@ -59,7 +61,7 @@ const ExploreTable: React.FC<ExploreTableProps> = ({ $key }) => {
         </Table.Column>
       </Table.Head>
 
-      <Table.Body items={data.entries}>
+      <Table.Body items={data.entries?.nodes ?? []}>
         {(item) => (
           <Table.Row id={item.id}>
             <Table.Cell>

diff --git a/app/src/components/interfaces/explore/table/ExploreTableFile.tsx b/app/src/components/interfaces/explore/table/ExploreTableFile.tsx
@@ -16,14 +16,16 @@ const FRAGMENT = graphql`
       directory_path
     }
     video_streams {
-      index
-      codec
-      quality {
-        aspect_ratio
-        width
-        height
-        resolution {
-          abbreviation
+      nodes {
+        index
+        codec
+        quality {
+          aspect_ratio
+          width
+          height
+          resolution {
+            abbreviation
+          }
         }
       }
     }
@@ -42,7 +44,7 @@ const ExploreTableFile: React.FC<ExploreTableFileProps> = ({ $key }) => {
       <IconFile size={20} />
       <Typography.Paragraph>{data.path_info.name}</Typography.Paragraph>
 
-      {data.video_streams?.map((stream) => (
+      {data.video_streams?.nodes?.map((stream) => (
         <React.Fragment key={stream.index}>
           <Chip color="info" size="sm">
             {stream.codec}

diff --git a/app/src/components/widgets/resolution/ResolutionWidget.tsx b/app/src/components/widgets/resolution/ResolutionWidget.tsx
@@ -6,8 +6,8 @@ import React from 'react'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
 const FRAGMENT = graphql`
-  query ResolutionWidgetQuery($directory_id: ID!, $order: [FileResolutionDistributionSortInput!]) {
-    file_resolution_distribution(directory_id: $directory_id, order: $order) {
+  query ResolutionWidgetQuery($directory_id: ID!) {
+    file_resolution_distribution(directory_id: $directory_id) {
       resolution {
         abbreviation
       }
@@ -25,7 +25,6 @@ const ResolutionWidget: React.FC<ResolutionWidgetProps> = ({ directory }) => {
 
   const data = useLazyLoadQuery<ResolutionWidgetQuery>(FRAGMENT, {
     directory_id: directory,
-    order: [{ count: 'DESC' }],
   })
 
   const total = React.useMemo<number>(