Pass full variables options down to computed view variable planner functions

Computed view planners expect to be passed full options objects for each variable, not just the list of variable values, oops.

Author: airhorns

packages/api-client-core/src/GadgetFunctions.ts

@@ -104,7 +104,7 @@ export interface ViewFunctionWithVariables<VariablesT, ResultT> {
   variables: VariablesOptions;
   variablesType: VariablesT;
   resultType: ResultT;
-  plan(variables: VariablesT): GQLBuilderResult;
+  plan(variables: VariablesOptions): GQLBuilderResult;
 }
 
 export type ViewFunction<VariablesT, ResultT> = ViewFunctionWithoutVariables<ResultT> | ViewFunctionWithVariables<VariablesT, ResultT>;

packages/react/spec/useView.spec.tsx

@@ -154,7 +154,7 @@ describe("useView", () => {
     expect(client.executeQuery).toHaveBeenCalledTimes(1);
 
     expect(query).toMatchInlineSnapshot(`
-      "query echo($value: undefined) {
+      "query echo($value: String) {
         echo(value: $value)
       }"
     `);
@@ -191,7 +191,7 @@ describe("useView", () => {
     expect(client.executeQuery).toHaveBeenCalledTimes(1);
 
     expect(query).toMatchInlineSnapshot(`
-      "query echo($value: undefined) {
+      "query echo($value: Int) {
         game {
           echo(value: $value)
         }
@@ -234,7 +234,7 @@ describe("useView", () => {
     expect(client.executeQuery).toHaveBeenCalledTimes(1);
 
     expect(query).toMatchInlineSnapshot(`
-      "query widgetStats($inStockOnly: undefined) {
+      "query widgetStats($inStockOnly: Boolean) {
         widgetStats(inStockOnly: $inStockOnly)
       }"
     `);

packages/react/src/useView.ts

@@ -1,5 +1,6 @@
 import type {
   GQLBuilderResult,
+  VariablesOptions,
   ViewFunction,
   ViewFunctionWithoutVariables,
   ViewFunctionWithVariables,
@@ -126,7 +127,20 @@ export function useView<VariablesT, F extends ViewFunction<VariablesT, any>>(
     if (typeof view == "string") {
       return [{ query: inlineViewQuery, variables: { query: view, variables: memoizedVariables } }, ["gellyView"]];
     } else {
-      return [view.plan((memoizedVariables ?? {}) as unknown as VariablesT), namespaceDataPath([view.gqlFieldName], view.namespace)];
+      const variablesOptions: VariablesOptions = {};
+      if ("variables" in view && memoizedVariables) {
+        for (const [name, variable] of Object.entries(view.variables)) {
+          const value = memoizedVariables[name as keyof typeof memoizedVariables] as unknown;
+          if (typeof value != "undefined" && value !== null) {
+            variablesOptions[name] = {
+              value,
+              ...variable,
+            };
+          }
+        }
+      }
+
+      return [view.plan(variablesOptions), namespaceDataPath([view.gqlFieldName], view.namespace)];
     }
   }, [view, memoizedVariables]);