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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/hooks/use-single-record-data.ts

@@ -0,0 +1,361 @@
+import { useState, useCallback, useEffect } from "react";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  FieldMetadata,
+} from "../../generator/metadata-generator";
+import {
+  buildSingleRecordQuery,
+  buildOneToManyRelationQuery,
+} from "../../graphql/query-builder";
+
+/**
+ * Relation data state
+ */
+export interface RelationData {
+  data: Record<string, unknown>[] | null;
+  loading: boolean;
+  error: Error | null;
+  hasNextPage: boolean;
+  endCursor: string | null;
+}
+
+/**
+ * Single record data fetcher interface for dependency injection
+ */
+export interface SingleRecordDataFetcher {
+  /**
+   * Fetch a single record by ID
+   */
+  fetchSingleRecord: (
+    tableName: string,
+    selectedFields: string[],
+    recordId: string,
+  ) => Promise<Record<string, unknown> | null>;
+
+  /**
+   * Fetch oneToMany relation data
+   */
+  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;
+  }>;
+
+  /**
+   * Fetch manyToOne relation data (single record)
+   */
+  fetchManyToOneRelation: (
+    targetTableName: string,
+    selectedFields: string[],
+    recordId: string,
+  ) => Promise<Record<string, unknown> | null>;
+}
+
+/**
+ * Get display fields for a table (excluding nested types)
+ */
+export function getDisplayFields(table: TableMetadata): FieldMetadata[] {
+  return table.fields.filter(
+    (field) => field.type !== "nested" && field.type !== "array",
+  );
+}
+
+/**
+ * Get fields for relation table display
+ */
+export 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);
+}
+
+const PAGE_SIZE = 10;
+
+export interface UseSingleRecordDataOptions {
+  tableMetadata: TableMetadata;
+  tableMetadataMap: TableMetadataMap;
+  recordId: string;
+  fetcher: SingleRecordDataFetcher;
+}
+
+export interface UseSingleRecordDataResult {
+  record: Record<string, unknown> | null;
+  loading: boolean;
+  error: Error | null;
+  relationDataMap: Record<string, RelationData>;
+  fetchRelationData: (
+    relationFieldName: string,
+    append?: boolean,
+  ) => Promise<void>;
+  refetch: () => void;
+}
+
+/**
+ * Custom hook for fetching single record data with relations
+ */
+export function useSingleRecordData({
+  tableMetadata,
+  tableMetadataMap,
+  recordId,
+  fetcher,
+}: UseSingleRecordDataOptions): UseSingleRecordDataResult {
+  // Record data state
+  const [record, setRecord] = useState<Record<string, unknown> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Relation data states (keyed by relation field name)
+  const [relationDataMap, setRelationDataMap] = useState<
+    Record<string, RelationData>
+  >({});
+
+  // Fetch the main record
+  const fetchRecord = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const fields = getDisplayFields(tableMetadata).map((f) => f.name);
+
+      // 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 = [...fields, ...fkFields];
+
+      const result = await fetcher.fetchSingleRecord(
+        tableMetadata.name,
+        allFields,
+        recordId,
+      );
+
+      setRecord(result);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch record"),
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [fetcher, 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;
+
+      // Use a promise to get current state for append check to avoid stale closure
+      let currentEndCursor: string | null = null;
+      let shouldSkip = false;
+
+      if (append) {
+        // Check current state synchronously via setState callback
+        await new Promise<void>((resolve) => {
+          setRelationDataMap((prev) => {
+            const existingData = prev[relationFieldName];
+            if (!existingData?.hasNextPage) {
+              shouldSkip = true;
+            } else {
+              currentEndCursor = existingData.endCursor;
+            }
+            resolve();
+            return prev; // Return unchanged state
+          });
+        });
+        if (shouldSkip) 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 = [
+          "id",
+          ...getRelationDisplayFields(targetTable).map((f) => f.name),
+        ];
+
+        const result = await fetcher.fetchOneToManyRelation(
+          relation.targetTable,
+          targetTable.pluralForm,
+          relation.foreignKeyField,
+          fields,
+          recordId,
+          PAGE_SIZE,
+          currentEndCursor,
+        );
+
+        setRelationDataMap((prev) => {
+          const existingRecords =
+            append && Array.isArray(prev[relationFieldName]?.data)
+              ? prev[relationFieldName].data
+              : [];
+
+          return {
+            ...prev,
+            [relationFieldName]: {
+              data: [
+                ...(existingRecords as Record<string, unknown>[]),
+                ...result.data,
+              ],
+              loading: false,
+              error: null,
+              hasNextPage: result.hasNextPage,
+              endCursor: result.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,
+          },
+        }));
+      }
+    },
+    [fetcher, tableMetadata, tableMetadataMap, recordId],
+  );
+
+  // 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);
+
+        const data = await fetcher.fetchManyToOneRelation(
+          relation.targetTable,
+          fields,
+          relatedId,
+        );
+
+        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,
+          },
+        }));
+      }
+    },
+    [fetcher, 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 = useCallback(() => {
+    fetchRecord();
+    setRelationDataMap({});
+  }, [fetchRecord]);
+
+  return {
+    record,
+    loading,
+    error,
+    relationDataMap,
+    fetchRelationData,
+    refetch: handleRefresh,
+  };
+}
+
+/**
+ * Build query string for single record fetch
+ */
+export { buildSingleRecordQuery, buildOneToManyRelationQuery };

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

@@ -0,0 +1,350 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SingleRecordTabContent } from "./single-record-tab-content";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { SingleRecordDataFetcher } from "./hooks/use-single-record-data";
+
+// Mock table metadata for "task" table
+const mockTaskTable: TableMetadata = {
+  name: "task",
+  pluralForm: "tasks",
+  description: "タスク",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "title", type: "string", required: true, description: "タイトル" },
+    { name: "description", type: "string", required: false },
+    { name: "status", type: "enum", required: true },
+    { name: "userId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+  relations: [
+    {
+      fieldName: "comments",
+      targetTable: "comment",
+      relationType: "oneToMany",
+      foreignKeyField: "taskId",
+    },
+    {
+      fieldName: "user",
+      targetTable: "user",
+      relationType: "manyToOne",
+      foreignKeyField: "userId",
+    },
+  ],
+};
+
+// Mock table metadata for "comment" table
+const mockCommentTable: TableMetadata = {
+  name: "comment",
+  pluralForm: "comments",
+  description: "コメント",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "content", type: "string", required: true },
+    { name: "taskId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+};
+
+// Mock table metadata for "user" table
+const mockUserTable: TableMetadata = {
+  name: "user",
+  pluralForm: "users",
+  description: "ユーザー",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "name", type: "string", required: true },
+    { name: "email", type: "string", required: true },
+  ],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  task: mockTaskTable,
+  comment: mockCommentTable,
+  user: mockUserTable,
+};
+
+// Mock record data
+const mockRecord = {
+  id: "task-123-456-789",
+  title: "Test Task",
+  description: "This is a test task",
+  status: "active",
+  userId: "user-123-456-789",
+  createdAt: "2024-01-01T00:00:00Z",
+};
+
+// Mock comment data
+const mockComments = [
+  {
+    id: "comment-1",
+    content: "First comment",
+    createdAt: "2024-01-02T00:00:00Z",
+  },
+  {
+    id: "comment-2",
+    content: "Second comment",
+    createdAt: "2024-01-03T00:00:00Z",
+  },
+];
+
+// Mock user data
+const mockUser = {
+  id: "user-123-456-789",
+  name: "Test User",
+  email: "test@example.com",
+};
+
+describe("SingleRecordTabContent", () => {
+  let mockFetcher: SingleRecordDataFetcher;
+
+  beforeEach(() => {
+    mockFetcher = {
+      fetchSingleRecord: vi.fn().mockResolvedValue(mockRecord),
+      fetchOneToManyRelation: vi.fn().mockResolvedValue({
+        data: mockComments,
+        hasNextPage: false,
+        endCursor: null,
+      }),
+      fetchManyToOneRelation: vi.fn().mockResolvedValue(mockUser),
+    };
+  });
+
+  describe("基本的な表示", () => {
+    it("ローディング状態が表示される", () => {
+      // Never resolve to keep loading state
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockImplementation(() => new Promise(() => {}));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      expect(screen.getByText("読み込み中...")).toBeInTheDocument();
+    });
+
+    it("レコードデータが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("This is a test task")).toBeInTheDocument();
+      expect(screen.getByText("active")).toBeInTheDocument();
+    });
+
+    it("fetchSingleRecordが正しいパラメータで呼ばれる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledWith(
+          "task",
+          expect.arrayContaining([
+            "id",
+            "title",
+            "description",
+            "status",
+            "userId",
+            "createdAt",
+          ]),
+          "task-123-456-789",
+        );
+      });
+    });
+  });
+
+  describe("エラーハンドリング", () => {
+    it("エラーメッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockRejectedValue(new Error("Network error"));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("データの取得に失敗しました: Network error"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("レコードが見つからない場合、メッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi.fn().mockResolvedValue(null);
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="nonexistent-id"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("レコードが見つかりません"),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("リレーションデータの取得", () => {
+    it("oneToMany関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledWith(
+          "comment",
+          "comments",
+          "taskId",
+          expect.arrayContaining(["id", "content"]),
+          "task-123-456-789",
+          10,
+          null,
+        );
+      });
+    });
+
+    it("manyToOne関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledWith(
+          "user",
+          expect.arrayContaining(["id", "name", "email"]),
+          "user-123-456-789",
+        );
+      });
+    });
+
+    it("関連データが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("First comment")).toBeInTheDocument();
+        expect(screen.getByText("Second comment")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("更新ボタン", () => {
+    it("更新ボタンをクリックするとデータが再取得される", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Clear call counts
+      vi.clearAllMocks();
+
+      // Click refresh button
+      await user.click(screen.getByRole("button", { name: /更新/ }));
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("無限ループ防止", () => {
+    it("fetchRelationDataが無限に呼ばれない", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      // Wait for initial render
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Wait a bit to ensure no additional calls are made
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Should only be called once for the initial fetch
+      expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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
  */