@izumisy-tailor/tailor-data-viewer 0.1.5 → 0.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
@@ -46,6 +46,7 @@
     "graphql-request": "^6.1.0",
     "idb": "^8.0.3",
     "lucide-react": "^0.468.0",
+    "raku-ql": "^1.4.0",
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
@@ -70,10 +71,12 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsdown": "^0.20.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "build": "tsdown",
-    "type-check": "tsc -b"
+    "type-check": "tsc -b",
+    "test": "vitest run"
   }
 }

package/src/component/data-table.tsx

@@ -23,7 +23,7 @@ import type {
   TableMetadataMap,
   ExpandedRelationFields,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import type { SortState } from "./hooks/use-table-data";
 import { useRelationData } from "./hooks/use-relation-data";
 import { RelationContent } from "./relation-content";

package/src/component/data-view-tab-content.tsx

@@ -7,7 +7,7 @@ import type {
   TableMetadataMap,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
 import { ColumnSelector } from "./column-selector";
 import { DataTable } from "./data-table";

package/src/component/hooks/use-relation-data.ts

@@ -7,7 +7,7 @@ import type {
 import {
   createGraphQLClient,
   executeQuery,
-} from "../../providers/graphql-client";
+} from "../../graphql/graphql-client";
 
 /**
  * Cache entry for relation data

package/src/component/hooks/use-table-data.ts

@@ -7,12 +7,12 @@ import type {
 import {
   createGraphQLClient,
   executeQuery,
-} from "../../providers/graphql-client";
+} from "../../graphql/graphql-client";
 import {
   buildListQuery,
   type RelationTotalInfo,
   type ExpandedRelationInfo,
-} from "../../utils/query-builder";
+} from "../../graphql/query-builder";
 import type { SearchFilters } from "../types";
 
 export interface SortState {

package/src/component/relation-content.tsx

@@ -14,7 +14,7 @@ import type {
   RelationMetadata,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../utils/query-builder";
+import { formatFieldValue } from "../graphql/query-builder";
 import type { RelationDataResult } from "./hooks/use-relation-data";
 
 interface RelationContentProps {

package/src/component/single-record-tab-content.tsx

@@ -16,8 +16,8 @@ import type {
   TableMetadataMap,
   FieldMetadata,
 } from "../generator/metadata-generator";
-import { createGraphQLClient, executeQuery } from "../providers/graphql-client";
-import { formatFieldValue } from "../utils/query-builder";
+import { createGraphQLClient, executeQuery } from "../graphql/graphql-client";
+import { formatFieldValue } from "../graphql/query-builder";
 import { ColumnSelector } from "./column-selector";
 import { useColumnState } from "./hooks/use-column-state";
 

package/src/graphql/index.ts

@@ -0,0 +1,6 @@
+/**
+ * GraphQL utilities and client
+ */
+
+export * from "./graphql-client";
+export * from "./query-builder";

package/src/graphql/query-builder.test.ts

@@ -0,0 +1,238 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildListQuery,
+  getDefaultSelectedFields,
+  getSelectableFields,
+  formatFieldValue,
+} from "./query-builder";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  RelationMetadata,
+} from "../generator/metadata-generator";
+
+describe("query-builder", () => {
+  describe("buildListQuery", () => {
+    it("should build a basic list query", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name", "status", "createdAt"],
+      });
+
+      // gql-query-builder outputs with spaces, so we use regex patterns
+      expect(query).toMatch(/query\s+TaskList\s*\(\$query:\s*TaskQueryInput\)/);
+      expect(query).toContain("tasks(query: $query)");
+      expect(query).toContain("name");
+      expect(query).toContain("status");
+      expect(query).toContain("createdAt");
+      expect(query).toContain("pageInfo");
+      expect(query).toContain("hasNextPage");
+      expect(query).toContain("endCursor");
+    });
+
+    it("should include orderBy when specified", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        orderBy: { field: "createdAt", direction: "Desc" },
+      });
+
+      // Variable should include order with array type
+      expect(query).toMatch(/\$order:\s*\[TaskOrderInput!\]/);
+      // Operation should use variable reference
+      expect(query).toContain("order: $order");
+    });
+
+    it("should include pagination arguments", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        first: 10,
+        after: "cursor123",
+      });
+
+      // Variables should include first and after
+      expect(query).toMatch(/\$first:\s*Int/);
+      expect(query).toMatch(/\$after:\s*String/);
+      // Operation should use variable references
+      expect(query).toContain("first: $first");
+      expect(query).toContain("after: $after");
+    });
+
+    it("should include oneToMany relation totals", () => {
+      const relation: RelationMetadata = {
+        fieldName: "taskAssignments",
+        targetTable: "taskAssignment",
+        relationType: "oneToMany",
+        foreignKeyField: "taskId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        oneToManyRelationTotals: [
+          { relation, targetPluralForm: "taskAssignments" },
+        ],
+      });
+
+      expect(query).toContain("taskAssignments(first: 0)");
+      expect(query).toContain("total");
+    });
+
+    it("should include expanded manyToOne relations", () => {
+      const relation: RelationMetadata = {
+        fieldName: "user",
+        targetTable: "user",
+        relationType: "manyToOne",
+        foreignKeyField: "userId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        expandedManyToOneRelations: [
+          { relation, selectedFields: ["email", "displayName"] },
+        ],
+      });
+
+      expect(query).toContain("user {");
+      expect(query).toContain("email");
+      expect(query).toContain("displayName");
+    });
+
+    it("should handle PascalCase conversion for table names", () => {
+      const query = buildListQuery({
+        tableName: "taskAssignment",
+        pluralForm: "taskAssignments",
+        selectedFields: ["id"],
+      });
+
+      expect(query).toMatch(
+        /query\s+TaskAssignmentList\s*\(\$query:\s*TaskAssignmentQueryInput\)/,
+      );
+    });
+  });
+
+  describe("getDefaultSelectedFields", () => {
+    it("should exclude nested and array fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "tags", type: "array", required: false },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name"]);
+    });
+
+    it("should exclude id fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "userId", type: "uuid", required: false },
+          { name: "status", type: "string", required: true },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name", "status"]);
+    });
+  });
+
+  describe("getSelectableFields", () => {
+    it("should return all fields except nested types", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "count", type: "number", required: false },
+        ],
+      };
+
+      const fields = getSelectableFields(table);
+      expect(fields.map((f) => f.name)).toEqual(["id", "name", "count"]);
+    });
+  });
+
+  describe("formatFieldValue", () => {
+    it("should return '-' for null or undefined", () => {
+      const field: FieldMetadata = {
+        name: "test",
+        type: "string",
+        required: false,
+      };
+      expect(formatFieldValue(null, field)).toBe("-");
+      expect(formatFieldValue(undefined, field)).toBe("-");
+    });
+
+    it("should format boolean as Japanese text", () => {
+      const field: FieldMetadata = {
+        name: "active",
+        type: "boolean",
+        required: false,
+      };
+      expect(formatFieldValue(true, field)).toBe("はい");
+      expect(formatFieldValue(false, field)).toBe("いいえ");
+    });
+
+    it("should format number with locale", () => {
+      const field: FieldMetadata = {
+        name: "count",
+        type: "number",
+        required: false,
+      };
+      expect(formatFieldValue(1234567, field)).toBe("1,234,567");
+    });
+
+    it("should truncate UUID", () => {
+      const field: FieldMetadata = { name: "id", type: "uuid", required: true };
+      const uuid = "550e8400-e29b-41d4-a716-446655440000";
+      expect(formatFieldValue(uuid, field)).toBe("550e8400...");
+    });
+
+    it("should format array values", () => {
+      const field: FieldMetadata = {
+        name: "tags",
+        type: "array",
+        required: false,
+      };
+      expect(formatFieldValue(["a", "b", "c"], field)).toBe("a, b, c");
+    });
+
+    it("should format time as string", () => {
+      const field: FieldMetadata = {
+        name: "startTime",
+        type: "time",
+        required: false,
+      };
+      expect(formatFieldValue("14:30:00", field)).toBe("14:30:00");
+    });
+
+    it("should return string as-is for string type", () => {
+      const field: FieldMetadata = {
+        name: "name",
+        type: "string",
+        required: true,
+      };
+      expect(formatFieldValue("Hello World", field)).toBe("Hello World");
+    });
+  });
+});

package/src/{utils → graphql}/query-builder.ts

@@ -1,3 +1,4 @@
+import { QueryBuilder } from "raku-ql";
 import type {
   TableMetadata,
   FieldMetadata,
@@ -65,63 +66,70 @@ export function buildListQuery(options: QueryOptions): string {
   // GraphQL type names need PascalCase
   const typeName = toPascalCase(tableName);
 
-  // Build order clause if specified
-  const orderArg = orderBy
-    ? `, order: [{ field: ${typeName}OrderFields.${orderBy.field}, direction: OrderDirection.${orderBy.direction} }]`
-    : "";
-
-  // Build pagination arguments
-  const firstArg = first !== undefined ? `, first: ${first}` : "";
-  const afterArg = after !== undefined ? `, after: "${after}"` : "";
-
-  // Build oneToMany relation total fields (fetching only total for display before expansion)
-  // These are nested connection queries that get total count for each parent record
-  const relationTotalFields =
-    oneToManyRelationTotals
-      ?.map((info) => {
-        return `${info.relation.fieldName}(first: 0) {
-              total
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Build expanded manyToOne relation fields (inline object fetching)
-  const expandedRelationFields =
-    expandedManyToOneRelations
-      ?.filter((info) => info.selectedFields.length > 0)
-      .map((info) => {
-        const nestedFields = info.selectedFields.join("\n              ");
-        return `${info.relation.fieldName} {
-              ${nestedFields}
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Format fields with proper indentation
-  const fieldsStr = selectedFields.join("\n            ");
-  let allFieldsStr = fieldsStr;
-  if (relationTotalFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${relationTotalFields}`;
+  // Build variables definition
+  const variables: Record<string, string> = {
+    query: `${typeName}QueryInput`,
+  };
+
+  // Build operation arguments using variable references
+  const operationArgs: Record<string, string> = {
+    query: "$query",
+  };
+
+  if (orderBy) {
+    // Use a single order variable with the full array type
+    variables.order = `[${typeName}OrderInput!]`;
+    operationArgs.order = "$order";
   }
-  if (expandedRelationFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${expandedRelationFields}`;
+
+  if (first !== undefined) {
+    variables.first = "Int";
+    operationArgs.first = "$first";
+  }
+
+  if (after !== undefined) {
+    variables.after = "String";
+    operationArgs.after = "$after";
   }
 
-  return `
-    query ${typeName}List($query: ${typeName}QueryInput) {
-      ${pluralForm}(query: $query${orderArg}${firstArg}${afterArg}) {
-        edges {
-          node {
-            ${allFieldsStr}
+  // Build the query using raku-ql
+  const builder = QueryBuilder.query(`${typeName}List`).variables(variables);
+
+  // Use operation method for root-level query with arguments
+  builder.operation(pluralForm, operationArgs, (op) => {
+    op.object("edges", (edges) => {
+      edges.object("node", (node) => {
+        // Add selected fields
+        node.fields(...(selectedFields as []));
+
+        // Add oneToMany relation totals with arguments
+        if (oneToManyRelationTotals) {
+          for (const info of oneToManyRelationTotals) {
+            node.object(info.relation.fieldName, { first: 0 }, (rel) => {
+              rel.fields("total");
+            });
           }
         }
-        pageInfo {
-          hasNextPage
-          endCursor
+
+        // Add expanded manyToOne relations
+        if (expandedManyToOneRelations) {
+          for (const info of expandedManyToOneRelations) {
+            if (info.selectedFields.length > 0) {
+              node.object(info.relation.fieldName, (rel) => {
+                rel.fields(...(info.selectedFields as []));
+              });
+            }
+          }
         }
-      }
-    }
-  `.trim();
+      });
+    });
+
+    op.object("pageInfo", (pageInfo) => {
+      pageInfo.fields("hasNextPage", "endCursor");
+    });
+  });
+
+  return builder.build();
 }
 
 /**