@izumisy-tailor/tailor-data-viewer 0.1.19 → 0.1.21

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useMemo } from "react";
 import { RefreshCw, Loader2, ChevronDown, ExternalLink } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Button } from "./ui/button";
@@ -14,12 +14,18 @@ import {
 import type {
   TableMetadata,
   TableMetadataMap,
-  FieldMetadata,
 } from "../generator/metadata-generator";
-import { createGraphQLClient, executeQuery } from "../graphql/graphql-client";
+import { createGraphQLClient } from "../graphql/graphql-client";
 import { formatFieldValue } from "../graphql/query-builder";
 import { ColumnSelector } from "./column-selector";
 import { useColumnState } from "./hooks/use-column-state";
+import {
+  useSingleRecordData,
+  getDisplayFields,
+  getRelationDisplayFields,
+  type SingleRecordDataFetcher,
+} from "./hooks/use-single-record-data";
+import { createGraphQLFetcher } from "../graphql/graphql-fetcher";
 
 interface SingleRecordTabContentProps {
   /** Target table metadata */
@@ -41,48 +47,8 @@ interface SingleRecordTabContentProps {
     targetTableName: string,
     recordId: string,
   ) => void;
-}
-
-interface RelationData {
-  data: Record<string, unknown>[] | null;
-  loading: boolean;
-  error: Error | null;
-  hasNextPage: boolean;
-  endCursor: string | null;
-}
-
-const PAGE_SIZE = 10;
-
-/**
- * Convert camelCase to PascalCase
- */
-function toPascalCase(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-/**
- * Get display fields for a table (excluding nested types)
- */
-function getDisplayFields(table: TableMetadata): FieldMetadata[] {
-  return table.fields.filter(
-    (field) => field.type !== "nested" && field.type !== "array",
-  );
-}
-
-/**
- * Get fields for relation table display
- */
-function getRelationDisplayFields(table: TableMetadata): FieldMetadata[] {
-  return table.fields
-    .filter(
-      (field) =>
-        field.type !== "nested" &&
-        field.type !== "array" &&
-        field.name !== "id" &&
-        !field.name.endsWith("Id") &&
-        !["createdAt", "updatedAt"].includes(field.name),
-    )
-    .slice(0, 6);
+  /** Custom data fetcher for testing/mocking */
+  fetcher?: SingleRecordDataFetcher;
 }
 
 /**
@@ -96,16 +62,15 @@ export function SingleRecordTabContent({
   recordId,
   onOpenAsSheet,
   onOpenSingleRecordAsSheet,
+  fetcher: customFetcher,
 }: SingleRecordTabContentProps) {
-  // Record data state
-  const [record, setRecord] = useState<Record<string, unknown> | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
+  // Create default fetcher from GraphQL client if not provided
+  const defaultFetcher = useMemo(() => {
+    const client = createGraphQLClient(appUri);
+    return createGraphQLFetcher(client);
+  }, [appUri]);
 
-  // Relation data states (keyed by relation field name)
-  const [relationDataMap, setRelationDataMap] = useState<
-    Record<string, RelationData>
-  >({});
+  const fetcher = customFetcher ?? defaultFetcher;
 
   // Column state for field selection
   const allDisplayFields = useMemo(
@@ -114,244 +79,20 @@ export function SingleRecordTabContent({
   );
   const columnState = useColumnState(allDisplayFields, tableMetadata.relations);
 
-  const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
-
-  // Fetch the main record
-  const fetchRecord = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const fields = getDisplayFields(tableMetadata)
-        .map((f) => f.name)
-        .join("\n        ");
-
-      // Also include FK fields for manyToOne relations
-      const fkFields = (tableMetadata.relations ?? [])
-        .filter((r) => r.relationType === "manyToOne")
-        .map((r) => r.foreignKeyField)
-        .filter((fk) => !tableMetadata.fields.some((f) => f.name === fk));
-
-      const allFields =
-        fkFields.length > 0
-          ? `${fields}\n        ${fkFields.join("\n        ")}`
-          : fields;
-
-      const query = `
-        query ${toPascalCase(tableMetadata.name)}Single($id: ID!) {
-          ${tableMetadata.name}(id: $id) {
-            ${allFields}
-          }
-        }
-      `.trim();
-
-      const result = await executeQuery<
-        Record<string, Record<string, unknown> | null>
-      >(client, query, { id: recordId });
-
-      setRecord(result[tableMetadata.name]);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch record"),
-      );
-    } finally {
-      setLoading(false);
-    }
-  }, [client, tableMetadata, recordId]);
-
-  // Fetch relation data (oneToMany)
-  const fetchRelationData = useCallback(
-    async (relationFieldName: string, append = false) => {
-      const relation = tableMetadata.relations?.find(
-        (r) => r.fieldName === relationFieldName,
-      );
-      if (!relation) return;
-
-      const targetTable = tableMetadataMap[relation.targetTable];
-      if (!targetTable) return;
-
-      const existingData = relationDataMap[relationFieldName];
-      if (append && !existingData?.hasNextPage) return;
-
-      setRelationDataMap((prev) => ({
-        ...prev,
-        [relationFieldName]: {
-          ...prev[relationFieldName],
-          data: append ? (prev[relationFieldName]?.data ?? null) : null,
-          loading: true,
-          error: null,
-          hasNextPage: prev[relationFieldName]?.hasNextPage ?? false,
-          endCursor: prev[relationFieldName]?.endCursor ?? null,
-        },
-      }));
-
-      try {
-        const fields = getRelationDisplayFields(targetTable)
-          .map((f) => f.name)
-          .join("\n            ");
-        const afterCursor = append ? existingData?.endCursor : undefined;
-        const afterArg = afterCursor ? `, after: "${afterCursor}"` : "";
-
-        const query = `
-          query ${toPascalCase(relation.targetTable)}List($parentId: ID!) {
-            ${targetTable.pluralForm}(query: { ${relation.foreignKeyField}: { eq: $parentId } }, first: ${PAGE_SIZE}${afterArg}) {
-              edges {
-                node {
-                  id
-                  ${fields}
-                }
-              }
-              pageInfo {
-                hasNextPage
-                endCursor
-              }
-            }
-          }
-        `.trim();
-
-        const result = await executeQuery<
-          Record<
-            string,
-            {
-              edges: { node: Record<string, unknown> }[];
-              pageInfo: { hasNextPage: boolean; endCursor: string | null };
-            }
-          >
-        >(client, query, { parentId: recordId });
-
-        const responseData = result[targetTable.pluralForm];
-        if (responseData) {
-          const newData = responseData.edges.map((edge) => edge.node);
-          const existingRecords =
-            append && Array.isArray(existingData?.data)
-              ? existingData.data
-              : [];
-
-          setRelationDataMap((prev) => ({
-            ...prev,
-            [relationFieldName]: {
-              data: [...existingRecords, ...newData],
-              loading: false,
-              error: null,
-              hasNextPage: responseData.pageInfo.hasNextPage,
-              endCursor: responseData.pageInfo.endCursor,
-            },
-          }));
-        }
-      } catch (err) {
-        setRelationDataMap((prev) => ({
-          ...prev,
-          [relationFieldName]: {
-            ...prev[relationFieldName],
-            data: prev[relationFieldName]?.data ?? null,
-            loading: false,
-            error:
-              err instanceof Error
-                ? err
-                : new Error("Failed to fetch relation"),
-            hasNextPage: false,
-            endCursor: null,
-          },
-        }));
-      }
-    },
-    [client, tableMetadata, tableMetadataMap, recordId, relationDataMap],
-  );
-
-  // Fetch manyToOne relation data
-  const fetchManyToOneData = useCallback(
-    async (relationFieldName: string, relatedId: string) => {
-      const relation = tableMetadata.relations?.find(
-        (r) => r.fieldName === relationFieldName,
-      );
-      if (!relation) return;
-
-      const targetTable = tableMetadataMap[relation.targetTable];
-      if (!targetTable) return;
-
-      setRelationDataMap((prev) => ({
-        ...prev,
-        [relationFieldName]: {
-          data: null,
-          loading: true,
-          error: null,
-          hasNextPage: false,
-          endCursor: null,
-        },
-      }));
-
-      try {
-        const fields = getDisplayFields(targetTable)
-          .map((f) => f.name)
-          .join("\n        ");
-
-        const query = `
-          query ${toPascalCase(relation.targetTable)}Single($id: ID!) {
-            ${relation.targetTable}(id: $id) {
-              ${fields}
-            }
-          }
-        `.trim();
-
-        const result = await executeQuery<
-          Record<string, Record<string, unknown> | null>
-        >(client, query, { id: relatedId });
-
-        const data = result[relation.targetTable];
-        setRelationDataMap((prev) => ({
-          ...prev,
-          [relationFieldName]: {
-            data: data ? [data] : null,
-            loading: false,
-            error: null,
-            hasNextPage: false,
-            endCursor: null,
-          },
-        }));
-      } catch (err) {
-        setRelationDataMap((prev) => ({
-          ...prev,
-          [relationFieldName]: {
-            data: null,
-            loading: false,
-            error:
-              err instanceof Error
-                ? err
-                : new Error("Failed to fetch relation"),
-            hasNextPage: false,
-            endCursor: null,
-          },
-        }));
-      }
-    },
-    [client, tableMetadata, tableMetadataMap],
-  );
-
-  // Initial fetch
-  useEffect(() => {
-    fetchRecord();
-  }, [fetchRecord]);
-
-  // Fetch relations after record is loaded
-  useEffect(() => {
-    if (!record || !tableMetadata.relations) return;
-
-    for (const relation of tableMetadata.relations) {
-      if (relation.relationType === "oneToMany") {
-        fetchRelationData(relation.fieldName);
-      } else if (relation.relationType === "manyToOne") {
-        const relatedId = record[relation.foreignKeyField];
-        if (typeof relatedId === "string" && relatedId) {
-          fetchManyToOneData(relation.fieldName, relatedId);
-        }
-      }
-    }
-  }, [record, tableMetadata.relations, fetchManyToOneData, fetchRelationData]);
-
-  const handleRefresh = () => {
-    fetchRecord();
-    setRelationDataMap({});
-  };
+  // Use the custom hook for data fetching
+  const {
+    record,
+    loading,
+    error,
+    relationDataMap,
+    fetchRelationData,
+    refetch,
+  } = useSingleRecordData({
+    tableMetadata,
+    tableMetadataMap,
+    recordId,
+    fetcher,
+  });
 
   if (loading && !record) {
     return (
@@ -419,7 +160,7 @@ export function SingleRecordTabContent({
           <Button
             variant="outline"
             size="sm"
-            onClick={handleRefresh}
+            onClick={refetch}
             disabled={loading}
           >
             <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />

package/src/graphql/graphql-fetcher.ts

@@ -0,0 +1,94 @@
+import type { GraphQLClient } from "graphql-request";
+import { executeQuery } from "./graphql-client";
+import {
+  buildSingleRecordQuery,
+  buildOneToManyRelationQuery,
+} from "./query-builder";
+import type { SingleRecordDataFetcher } from "../component/hooks/use-single-record-data";
+
+/**
+ * Create a data fetcher that uses GraphQL client for actual requests
+ */
+export function createGraphQLFetcher(
+  client: GraphQLClient,
+): SingleRecordDataFetcher {
+  return {
+    async fetchSingleRecord(
+      tableName: string,
+      selectedFields: string[],
+      recordId: string,
+    ): Promise<Record<string, unknown> | null> {
+      const query = buildSingleRecordQuery({
+        tableName,
+        selectedFields,
+      });
+
+      const result = await executeQuery<
+        Record<string, Record<string, unknown> | null>
+      >(client, query, { id: recordId });
+
+      return result[tableName];
+    },
+
+    async fetchOneToManyRelation(
+      targetTableName: string,
+      targetPluralForm: string,
+      foreignKeyField: string,
+      selectedFields: string[],
+      parentId: string,
+      first: number,
+      after?: string | null,
+    ): Promise<{
+      data: Record<string, unknown>[];
+      hasNextPage: boolean;
+      endCursor: string | null;
+    }> {
+      const query = buildOneToManyRelationQuery({
+        targetTableName,
+        targetPluralForm,
+        foreignKeyField,
+        selectedFields,
+        first,
+        after,
+      });
+
+      const result = await executeQuery<
+        Record<
+          string,
+          {
+            edges: { node: Record<string, unknown> }[];
+            pageInfo: { hasNextPage: boolean; endCursor: string | null };
+          }
+        >
+      >(client, query, { parentId });
+
+      const responseData = result[targetPluralForm];
+      if (!responseData) {
+        return { data: [], hasNextPage: false, endCursor: null };
+      }
+
+      return {
+        data: responseData.edges.map((edge) => edge.node),
+        hasNextPage: responseData.pageInfo.hasNextPage,
+        endCursor: responseData.pageInfo.endCursor,
+      };
+    },
+
+    async fetchManyToOneRelation(
+      targetTableName: string,
+      selectedFields: string[],
+      recordId: string,
+    ): Promise<Record<string, unknown> | null> {
+      const query = buildSingleRecordQuery({
+        tableName: targetTableName,
+        selectedFields,
+      });
+
+      const result = await executeQuery<
+        Record<string, Record<string, unknown> | null>
+      >(client, query, { id: recordId });
+
+      return result[targetTableName];
+    },
+  };
+}

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

@@ -1,6 +1,8 @@
 import { describe, it, expect } from "vitest";
 import {
   buildListQuery,
+  buildSingleRecordQuery,
+  buildOneToManyRelationQuery,
   getDefaultSelectedFields,
   getSelectableFields,
   formatFieldValue,
@@ -235,4 +237,77 @@ describe("query-builder", () => {
       expect(formatFieldValue("Hello World", field)).toBe("Hello World");
     });
   });
+
+  describe("buildSingleRecordQuery", () => {
+    it("should build a basic single record query", () => {
+      const query = buildSingleRecordQuery({
+        tableName: "task",
+        selectedFields: ["id", "title", "description"],
+      });
+
+      expect(query).toMatch(/query\s+TaskSingle\s*\(\$id:\s*ID!\)/);
+      expect(query).toContain("task(id: $id)");
+      expect(query).toContain("id");
+      expect(query).toContain("title");
+      expect(query).toContain("description");
+    });
+
+    it("should handle different table names", () => {
+      const query = buildSingleRecordQuery({
+        tableName: "userProfile",
+        selectedFields: ["name", "email"],
+      });
+
+      expect(query).toMatch(/query\s+UserProfileSingle/);
+      expect(query).toContain("userProfile(id: $id)");
+    });
+  });
+
+  describe("buildOneToManyRelationQuery", () => {
+    it("should build a oneToMany relation query", () => {
+      const query = buildOneToManyRelationQuery({
+        targetTableName: "comment",
+        targetPluralForm: "comments",
+        foreignKeyField: "taskId",
+        selectedFields: ["id", "content"],
+        first: 10,
+      });
+
+      expect(query).toMatch(/query\s+CommentList\s*\(\$parentId:\s*ID!\)/);
+      expect(query).toContain("comments(");
+      expect(query).toContain("query: { taskId: { eq: $parentId } }");
+      expect(query).toContain("first: 10");
+      expect(query).toContain("id");
+      expect(query).toContain("content");
+      expect(query).toContain("pageInfo");
+      expect(query).toContain("hasNextPage");
+      expect(query).toContain("endCursor");
+    });
+
+    it("should include after cursor when provided", () => {
+      const query = buildOneToManyRelationQuery({
+        targetTableName: "comment",
+        targetPluralForm: "comments",
+        foreignKeyField: "taskId",
+        selectedFields: ["id", "content"],
+        first: 10,
+        after: "cursor123",
+      });
+
+      expect(query).toContain('after: "cursor123"');
+    });
+
+    it("should not include after when null", () => {
+      const query = buildOneToManyRelationQuery({
+        targetTableName: "comment",
+        targetPluralForm: "comments",
+        foreignKeyField: "taskId",
+        selectedFields: ["id", "content"],
+        first: 10,
+        after: null,
+      });
+
+      expect(query).not.toContain("after:");
+    });
+  });
 });

package/src/graphql/query-builder.ts

@@ -156,6 +156,93 @@ export function getSelectableFields(table: TableMetadata): FieldMetadata[] {
   return table.fields.filter((field) => field.type !== "nested");
 }
 
+/**
+ * Options for building a single record query
+ */
+export interface SingleRecordQueryOptions {
+  tableName: string;
+  selectedFields: string[];
+}
+
+/**
+ * Build a GraphQL query for fetching a single record by ID
+ */
+export function buildSingleRecordQuery(
+  options: SingleRecordQueryOptions,
+): string {
+  const { tableName, selectedFields } = options;
+  const typeName = toPascalCase(tableName);
+
+  const builder = QueryBuilder.query(`${typeName}Single`)
+    .variables({ id: "ID!" })
+    .operation(tableName, { id: "$id" }, (op) => {
+      op.fields(...(selectedFields as []));
+    });
+
+  return builder.build();
+}
+
+/**
+ * Options for building a oneToMany relation query
+ */
+export interface OneToManyRelationQueryOptions {
+  targetTableName: string;
+  targetPluralForm: string;
+  foreignKeyField: string;
+  selectedFields: string[];
+  first: number;
+  after?: string | null;
+}
+
+/**
+ * Build a GraphQL query for fetching oneToMany relation data
+ */
+export function buildOneToManyRelationQuery(
+  options: OneToManyRelationQueryOptions,
+): string {
+  const {
+    targetTableName,
+    targetPluralForm,
+    foreignKeyField,
+    selectedFields,
+    first,
+    after,
+  } = options;
+  const typeName = toPascalCase(targetTableName);
+
+  // Build query arguments - query input is inlined, not a variable
+  const operationArgs: Record<string, unknown> = {
+    query: `{ ${foreignKeyField}: { eq: $parentId } }`,
+    first,
+  };
+
+  if (after) {
+    operationArgs.after = `"${after}"`;
+  }
+
+  // Build operation arguments as raw string since we need inline query input
+  const argsStr = Object.entries(operationArgs)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join(", ");
+
+  // Use manual query building for inline query input
+  const fieldsStr = selectedFields.join("\n        ");
+
+  return `query ${typeName}List($parentId: ID!) {
+  ${targetPluralForm}(${argsStr}) {
+    edges {
+      node {
+        ${fieldsStr}
+      }
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}`;
+}
+
 /**
  * Format a value based on its field type for display
  */