Support field calls in selection API

Author: shardulbee

packages/core/spec/Select-type.spec.ts

@@ -1,6 +1,7 @@
 import type { AssertTrue, IsExact } from "conditional-type-checks";
 import type { DeepFilterNever, Select } from "../src/types.js";
-import type { TestSchema } from "./TestSchema.js";
+import { $args } from "../src/types.js";
+import type { TestSchema, TestSchemaWithFieldCalls, TestSchemaWithNestedFieldCalls } from "./TestSchema.js";
 
 describe("Select<>", () => {
   type _SelectingProperties = AssertTrue<IsExact<Select<TestSchema, { num: true }>, { num: number }>>;
@@ -75,5 +76,40 @@ describe("Select<>", () => {
     >
   >;
 
+  type _fieldCallSelection = Select<
+    TestSchemaWithFieldCalls,
+    { fieldCall: { [$args]: { arg: [1, 2, 3]; limit: 10 }; nestedField1: true; nestedField2: { nestedField3: true } } }
+  >;
+  type _TestSelectingFieldCall = AssertTrue<
+    IsExact<_fieldCallSelection, { fieldCall: { nestedField1: number; nestedField2: { nestedField3: string } } }>
+  >;
+
+  type _simpleFieldCallSelection = Select<
+    { fieldWithArgs: number },
+    {
+      fieldWithArgs: {
+        [$args]: { arg: [1, 2, 3]; limit: 10 };
+      };
+    }
+  >;
+  type _TestSelectingSimpleFieldCall = AssertTrue<IsExact<_simpleFieldCallSelection, { fieldWithArgs: number }>>;
+
+  type _nestedFieldCallSelection = Select<
+    TestSchemaWithNestedFieldCalls,
+    {
+      outerFieldCall: {
+        [$args]: { outerArg: "value" };
+        innerFieldCall: {
+          [$args]: { innerArg: 123 };
+          deepField: { [$args]: { deepArg: "value" } };
+        };
+        regularField: true;
+      };
+    }
+  >;
+  type _TestSelectingNestedFieldCall = AssertTrue<
+    IsExact<_nestedFieldCallSelection, { outerFieldCall: { innerFieldCall: { deepField: string }; regularField: number } }>
+  >;
+
   test("true", () => undefined);
 });

packages/core/spec/TestSchema.ts

@@ -7,6 +7,26 @@ export type NestedThing = {
   nested: NestedThing;
 };
 
+export type TestSchemaWithFieldCalls = {
+  num: number;
+  str: string;
+  fieldCall: {
+    nestedField1: number;
+    nestedField2: {
+      nestedField3: string;
+    };
+  };
+};
+
+export type TestSchemaWithNestedFieldCalls = {
+  outerFieldCall: {
+    innerFieldCall: {
+      deepField: string;
+    };
+    regularField: number;
+  };
+};
+
 export type TestSchema = {
   num: number;
   str: string;

packages/core/src/AnyClient.ts

@@ -2,6 +2,7 @@ import type { AnyConnection } from "./AnyConnection.js";
 import type { AnyCoreImplementation } from "./AnyCoreImplementation.js";
 import type { AnyGadgetTransaction } from "./AnyGadgetTransaction.js";
 import type { AnyInternalModelManager } from "./AnyInternalModelManager.js";
+import type { $args } from "./types.js";
 
 export const $modelRelationships = Symbol.for("gadget/modelRelationships");
 export const $coreImplementation = Symbol.for("gadget/coreImplementation");
@@ -22,4 +23,5 @@ export interface AnyClient {
   internal: InternalModelManagerNamespace;
   [$modelRelationships]?: { [modelName: string]: { [apiIdentifier: string]: { type: string; model: string } } };
   [$coreImplementation]?: AnyCoreImplementation;
+  $args: typeof $args;
 }

packages/core/src/types.ts

@@ -115,10 +115,14 @@ type InnerSelect<Schema, Selection extends FieldSelection | null | undefined> =
     : Schema extends null
     ? InnerSelect<Exclude<Schema, null>, Selection> | null
     : {
-        [Key in keyof Selection & keyof Schema]: Selection[Key] extends true
+        // Exclude the $args symbol key - it's for field arguments, not nested selections
+        [Key in Exclude<keyof Selection, typeof $args> & keyof Schema]: Selection[Key] extends true
           ? Schema[Key]
           : Selection[Key] extends FieldSelection
-          ? InnerSelect<Schema[Key], Selection[Key]>
+          ? // If Selection[Key] only has $args (no nested field selections), return Schema[Key] directly
+            Exclude<keyof Selection[Key], typeof $args> extends never
+            ? Schema[Key]
+            : InnerSelect<Schema[Key], Selection[Key]>
           : never;
       }
 >;
@@ -989,10 +993,32 @@ export type ViewResult<F extends ViewFunction<any, any>> = Awaited<
   F extends ViewFunctionWithVariables<any, infer Result> ? Result : F extends ViewFunctionWithoutVariables<infer Result> ? Result : never
 >;
 
+/**
+ * Symbol key for field arguments in selections.
+ * Using a symbol avoids conflicts with string index signatures.
+ */
+export const $args = Symbol.for("gadget/fieldArgs");
+
+/**
+ * Type for field arguments (e.g., pagination, filtering on a field)
+ */
+export type FieldArgs = Record<string, any>;
+
 /**
  * Represents a list of fields selected from a GraphQL API call. Allows nesting, conditional selection.
  * Example: `{ id: true, name: false, richText: { markdown: true, html: false } }`
+ *
+ * Supports field arguments using the $args symbol:
+ * ```
+ * {
+ *   comments: {
+ *     [$args]: { after: "cursor", first: 10 },
+ *     body: true
+ *   }
+ * }
+ * ```
  **/
 export interface FieldSelection {
+  [$args]?: FieldArgs;
   [key: string]: boolean | null | undefined | FieldSelection;
 }

packages/react/src/auto/AutoTableValidators.ts

@@ -1,4 +1,4 @@
-import { type ModelMetadata } from "src/metadata.js";
+import { type ModelMetadata } from "../metadata.js";
 import type { useTable } from "../useTable.js";
 
 export const InvalidModelErrorMessage = `"model" is not a valid Gadget model`;

packages/test-bundles/tsconfig.json

@@ -3,13 +3,21 @@
   "compilerOptions": {
     "target": "es2020",
     "baseUrl": "./",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "module": "ES2022",
     "lib": ["es2020", "DOM"],
     "jsx": "react-jsx",
     "noEmit": true,
     "skipLibCheck": true,
-    "declaration": false
+    "declaration": false,
+    "paths": {
+      "@gadgetinc/react": ["../react/src/index.ts"],
+      "@gadgetinc/react-shopify-app-bridge": ["../react-shopify-app-bridge/src/index.ts"],
+      "@gadgetinc/client-hooks": ["../client-hooks/src/index.ts"],
+      "@gadgetinc/core": ["../core/src/index.ts"],
+      "@gadgetinc/api-client-core": ["../api-client-core/src/index.ts"],
+      "tiny-graphql-query-compiler": ["../tiny-graphql-query-compiler/src/index.ts"]
+    }
   },
   "include": ["./build.ts", "./bundles"]
 }