Handle missing extraPngInfo field in queue (#1223)

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -249,7 +249,8 @@ const menuItems = computed<MenuItem[]>(() => [
   {
     label: t('loadWorkflow'),
     icon: 'pi pi-file-export',
-    command: () => menuTargetTask.value?.loadWorkflow(app)
+    command: () => menuTargetTask.value?.loadWorkflow(app),
+    disabled: !menuTargetTask.value?.workflow
   },
   {
     label: t('goToNode'),

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -83,11 +83,12 @@ const coverResult = flatOutputs.length
   ? props.task.previewOutput || flatOutputs[0]
   : null
 // Using `==` instead of `===` because NodeId can be a string or a number
-const node: ComfyNode | null = flatOutputs.length
-  ? props.task.workflow.nodes.find(
-      (n: ComfyNode) => n.id == coverResult.nodeId
-    ) ?? null
-  : null
+const node: ComfyNode | null =
+  flatOutputs.length && props.task.workflow
+    ? props.task.workflow.nodes.find(
+        (n: ComfyNode) => n.id == coverResult.nodeId
+      ) ?? null
+    : null
 const progressPreviewBlobUrl = ref('')
 
 const emit = defineEmits<{

src/stores/queueStore.ts

@@ -9,7 +9,7 @@ import type {
   TaskOutput,
   ResultItem
 } from '@/types/apiTypes'
-import type { NodeId } from '@/types/comfyWorkflow'
+import type { ComfyWorkflowJSON, NodeId } from '@/types/comfyWorkflow'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
 import { toRaw } from 'vue'
@@ -213,8 +213,8 @@ export class TaskItemImpl {
     return this.extraData.client_id
   }
 
-  get workflow() {
-    return this.extraPngInfo.workflow
+  get workflow(): ComfyWorkflowJSON | undefined {
+    return this.extraPngInfo?.workflow
   }
 
   get messages() {
@@ -289,6 +289,9 @@ export class TaskItemImpl {
   }
 
   public async loadWorkflow(app: ComfyApp) {
+    if (!this.workflow) {
+      return
+    }
     await app.loadGraphData(toRaw(this.workflow))
     if (this.outputs) {
       app.nodeOutputs = toRaw(this.outputs)

src/types/apiTypes.ts

@@ -116,7 +116,8 @@ const zExtraPngInfo = z
   .passthrough()
 
 const zExtraData = z.object({
-  extra_pnginfo: zExtraPngInfo,
+  /** extra_pnginfo can be missing is backend execution gets a validation error. */
+  extra_pnginfo: zExtraPngInfo.optional(),
   client_id: z.string()
 })
 const zOutputsToExecute = z.array(zNodeId)