ensure @gradio/client always returns the correct data (#8716)

* ensure data is alwat returned as expected

* add changeset

* update test data

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/rare-frogs-warn.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:ensure `@gradio/client` always returns the correct data

client/js/src/helpers/data.ts

@@ -187,14 +187,15 @@ export function handle_payload(
 
 	let updated_payload: unknown[] = [];
 	let payload_index = 0;
-	for (let i = 0; i < dependency.inputs.length; i++) {
-		const input_id = dependency.inputs[i];
+	const deps = type === "input" ? dependency.inputs : dependency.outputs;
+	for (let i = 0; i < deps.length; i++) {
+		const input_id = deps[i];
 		const component = components.find((c) => c.id === input_id);
 
 		if (component?.type === "state") {
 			// input + with_null_state needs us to fill state with null values
 			if (with_null_state) {
-				if (resolved_payload.length === dependency.inputs.length) {
+				if (resolved_payload.length === deps.length) {
 					const value = resolved_payload[payload_index];
 					updated_payload.push(value);
 					payload_index++;

client/js/src/test/data.test.ts

@@ -362,7 +362,7 @@ describe("handle_payload", () => {
 	it("should return an output payload without the state component value when with_null_state is false", () => {
 		const resolved_payload = ["hello", null];
 		const dependency = {
-			inputs: [2, 3]
+			outputs: [2, 3]
 		};
 		const components = [
 			{ id: 2, type: "textbox" },
@@ -383,7 +383,7 @@ describe("handle_payload", () => {
 	it("should return an ouput payload without the two state component values when with_null_state is false", () => {
 		const resolved_payload = ["hello", null, "world", null];
 		const dependency = {
-			inputs: [2, 3, 4, 5]
+			outputs: [2, 3, 4, 5]
 		};
 		const components = [
 			{ id: 2, type: "textbox" },
@@ -406,7 +406,7 @@ describe("handle_payload", () => {
 	it("should return an ouput payload with the two state component values when with_null_state is true", () => {
 		const resolved_payload = ["hello", null, "world", null];
 		const dependency = {
-			inputs: [2, 3, 4, 5]
+			outputs: [2, 3, 4, 5]
 		};
 		const components = [
 			{ id: 2, type: "textbox" },
@@ -441,6 +441,7 @@ describe("handle_payload", () => {
 			// @ts-ignore
 			dependency,
 			components,
+			"input",
 			with_null_state
 		);
 		expect(result).toEqual(["hello", "world"]);

client/js/src/utils/handle_blob.ts

@@ -41,7 +41,10 @@ export async function handle_blob(
 				path,
 				file_url,
 				type,
-				name: blob instanceof File ? blob?.name : undefined
+				name:
+					typeof File !== "undefined" && blob instanceof File
+						? blob?.name
+						: undefined
 			};
 		})
 	);