@izumisy-tailor/tailor-data-viewer 0.1.27 → 0.1.29

package/package.json

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

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

@@ -0,0 +1,414 @@
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../../generator/metadata-generator";
+import {
+  createGraphQLClient,
+  executeQuery,
+} from "../../graphql/graphql-client";
+import {
+  buildListQuery,
+  type RelationTotalInfo,
+  type ExpandedRelationInfo,
+} from "../../graphql/query-builder";
+import type { SearchFilters } from "../types";
+import {
+  buildQueryInput,
+  buildOrderInput,
+  type SortState,
+} from "./use-table-data";
+
+export interface PaginationState {
+  first: number;
+  after: string | null;
+  hasNextPage: boolean;
+  endCursor: string | null;
+}
+
+export interface TableDataStoreState {
+  data: Record<string, unknown>[];
+  loading: boolean;
+  error: Error | null;
+  sortStates: SortState[];
+  pagination: PaginationState;
+  cursorHistory: (string | null)[];
+}
+
+export interface TableDataStoreConfig {
+  appUri: string;
+  table: TableMetadata | null;
+  selectedFields: string[];
+  selectedRelations?: string[];
+  searchFilters?: SearchFilters;
+  tableMetadataMap?: TableMetadataMap;
+  expandedRelationFields?: ExpandedRelationFields;
+  initialSort?: SortState[];
+}
+
+type GraphQLListResponse = Record<
+  string,
+  {
+    edges: { node: Record<string, unknown> }[];
+    pageInfo: {
+      hasNextPage: boolean;
+      endCursor: string | null;
+    };
+  }
+>;
+
+const DEFAULT_PAGE_SIZE = 20;
+
+/**
+ * External store for table data management.
+ * Used with useSyncExternalStore to avoid useEffect chains.
+ */
+export class TableDataStore {
+  private state: TableDataStoreState;
+  private listeners = new Set<() => void>();
+  private config: TableDataStoreConfig;
+  private client: ReturnType<typeof createGraphQLClient>;
+  private abortController: AbortController | null = null;
+  private hasFetchedInitially = false;
+
+  constructor(config: TableDataStoreConfig) {
+    this.config = config;
+    this.client = createGraphQLClient(config.appUri);
+    this.state = {
+      data: [],
+      loading: true,
+      error: null,
+      sortStates: config.initialSort ?? [],
+      pagination: {
+        first: DEFAULT_PAGE_SIZE,
+        after: null,
+        hasNextPage: false,
+        endCursor: null,
+      },
+      cursorHistory: [],
+    };
+  }
+
+  /**
+   * Subscribe to state changes (required by useSyncExternalStore)
+   * Triggers initial fetch on first subscription.
+   */
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+
+    // Trigger initial fetch when first listener subscribes
+    // This ensures notify() will reach the listener
+    if (!this.hasFetchedInitially) {
+      this.hasFetchedInitially = true;
+      this.fetch();
+    }
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  /**
+   * Get current state snapshot (required by useSyncExternalStore)
+   */
+  getSnapshot = (): TableDataStoreState => {
+    return this.state;
+  };
+
+  /**
+   * Update config and refetch if needed.
+   * Returns true if refetch was triggered.
+   */
+  updateConfig(newConfig: Partial<TableDataStoreConfig>): boolean {
+    const shouldRefetch =
+      newConfig.selectedFields !== undefined ||
+      newConfig.selectedRelations !== undefined ||
+      newConfig.searchFilters !== undefined ||
+      newConfig.expandedRelationFields !== undefined;
+
+    this.config = { ...this.config, ...newConfig };
+
+    if (shouldRefetch) {
+      this.fetch();
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Notify all subscribers of state change
+   */
+  private notify(): void {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+
+  /**
+   * Update state and notify subscribers
+   */
+  private setState(partial: Partial<TableDataStoreState>): void {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  }
+
+  /**
+   * Fetch data from GraphQL endpoint
+   */
+  async fetch(): Promise<void> {
+    const {
+      table,
+      selectedFields,
+      selectedRelations,
+      tableMetadataMap,
+      expandedRelationFields,
+      searchFilters,
+    } = this.config;
+    const { sortStates, pagination } = this.state;
+
+    if (!table || selectedFields.length === 0) {
+      this.setState({ data: [], loading: false });
+      return;
+    }
+
+    // Validate that selected fields exist in the current table
+    const tableFieldNames = new Set(table.fields.map((f) => f.name));
+    const validFields = selectedFields.filter((f) => tableFieldNames.has(f));
+
+    if (validFields.length === 0) {
+      this.setState({ data: [], loading: false });
+      return;
+    }
+
+    // Cancel any in-flight request
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    this.abortController = new AbortController();
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      // Always include 'id' field if not already selected
+      const fieldsToFetch = validFields.includes("id")
+        ? validFields
+        : ["id", ...validFields];
+
+      // Also include FK fields for selected manyToOne relations
+      const manyToOneFkFields = (table.relations ?? [])
+        .filter(
+          (r) =>
+            r.relationType === "manyToOne" &&
+            selectedRelations?.includes(r.fieldName),
+        )
+        .map((r) => r.foreignKeyField)
+        .filter((fk) => !fieldsToFetch.includes(fk));
+
+      const allFieldsToFetch = [...fieldsToFetch, ...manyToOneFkFields];
+
+      // Build oneToMany relation total info for selected relations
+      const oneToManyRelationTotals: RelationTotalInfo[] = (
+        table.relations ?? []
+      )
+        .filter(
+          (r) =>
+            r.relationType === "oneToMany" &&
+            selectedRelations?.includes(r.fieldName),
+        )
+        .map((r) => {
+          const targetTable = tableMetadataMap?.[r.targetTable];
+          return {
+            relation: r,
+            targetPluralForm: targetTable?.pluralForm ?? r.targetTable + "s",
+          };
+        });
+
+      // Build expanded manyToOne relation info for inline column display
+      const expandedManyToOneRelations: ExpandedRelationInfo[] = (
+        table.relations ?? []
+      )
+        .filter(
+          (r) =>
+            r.relationType === "manyToOne" &&
+            expandedRelationFields?.[r.fieldName]?.length,
+        )
+        .map((r) => ({
+          relation: r,
+          selectedFields: expandedRelationFields?.[r.fieldName] ?? [],
+        }));
+
+      const query = buildListQuery({
+        tableName: table.name,
+        pluralForm: table.pluralForm,
+        selectedFields: allFieldsToFetch,
+        orderBy: sortStates.length > 0 ? sortStates[0] : undefined,
+        first: pagination.first,
+        after: pagination.after ?? undefined,
+        oneToManyRelationTotals:
+          oneToManyRelationTotals.length > 0
+            ? oneToManyRelationTotals
+            : undefined,
+        expandedManyToOneRelations:
+          expandedManyToOneRelations.length > 0
+            ? expandedManyToOneRelations
+            : undefined,
+      });
+
+      // Build query variables with optional filters
+      const queryVariables: Record<string, unknown> = {};
+      const queryInput = buildQueryInput(searchFilters ?? []);
+      if (queryInput) {
+        queryVariables.query = queryInput;
+      }
+
+      // Add sort order variable
+      const orderInput = buildOrderInput(sortStates);
+      if (orderInput) {
+        queryVariables.order = orderInput;
+      }
+
+      // Add pagination variables
+      queryVariables.first = pagination.first;
+      if (pagination.after) {
+        queryVariables.after = pagination.after;
+      }
+
+      const result = await executeQuery<GraphQLListResponse>(
+        this.client,
+        query,
+        queryVariables,
+      );
+
+      // Check if request was aborted
+      if (this.abortController?.signal.aborted) {
+        return;
+      }
+
+      const responseData = result[table.pluralForm];
+
+      if (responseData) {
+        this.setState({
+          data: responseData.edges.map((edge) => edge.node),
+          loading: false,
+          pagination: {
+            ...pagination,
+            hasNextPage: responseData.pageInfo.hasNextPage,
+            endCursor: responseData.pageInfo.endCursor,
+          },
+        });
+      } else {
+        this.setState({ data: [], loading: false });
+      }
+    } catch (err) {
+      // Ignore abort errors
+      if (err instanceof Error && err.name === "AbortError") {
+        return;
+      }
+      this.setState({
+        error: err instanceof Error ? err : new Error("Failed to fetch data"),
+        data: [],
+        loading: false,
+      });
+    }
+  }
+
+  /**
+   * Set sort field and direction, then refetch
+   */
+  setSort(field: string, direction?: "Asc" | "Desc"): void {
+    const currentSort = this.state.sortStates[0];
+    let newSortStates: SortState[];
+
+    // If clicking the same field, toggle direction
+    if (currentSort?.field === field && !direction) {
+      newSortStates = [
+        {
+          field,
+          direction: currentSort.direction === "Asc" ? "Desc" : "Asc",
+        },
+      ];
+    } else {
+      newSortStates = [{ field, direction: direction ?? "Asc" }];
+    }
+
+    // Reset pagination when sorting changes
+    this.setState({
+      sortStates: newSortStates,
+      pagination: { ...this.state.pagination, after: null },
+      cursorHistory: [],
+    });
+
+    this.fetch();
+  }
+
+  /**
+   * Navigate to next page
+   */
+  nextPage(): void {
+    const { pagination, cursorHistory } = this.state;
+    if (pagination.hasNextPage && pagination.endCursor) {
+      this.setState({
+        cursorHistory: [...cursorHistory, pagination.after],
+        pagination: {
+          ...pagination,
+          after: pagination.endCursor,
+        },
+      });
+      this.fetch();
+    }
+  }
+
+  /**
+   * Navigate to previous page
+   */
+  previousPage(): void {
+    const { cursorHistory, pagination } = this.state;
+    if (cursorHistory.length > 0) {
+      const newHistory = [...cursorHistory];
+      const previousCursor = newHistory.pop();
+      this.setState({
+        cursorHistory: newHistory,
+        pagination: {
+          ...pagination,
+          after: previousCursor ?? null,
+        },
+      });
+      this.fetch();
+    }
+  }
+
+  /**
+   * Reset pagination to first page
+   */
+  resetPagination(): void {
+    this.setState({
+      pagination: {
+        first: DEFAULT_PAGE_SIZE,
+        after: null,
+        hasNextPage: false,
+        endCursor: null,
+      },
+      cursorHistory: [],
+    });
+    this.fetch();
+  }
+
+  /**
+   * Check if there's a previous page
+   */
+  get hasPreviousPage(): boolean {
+    return (
+      this.state.cursorHistory.length > 0 ||
+      this.state.pagination.after !== null
+    );
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    this.listeners.clear();
+  }
+}

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

@@ -1,6 +1,20 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { buildQueryInput, buildOrderInput } from "./use-table-data";
+import { renderHook, waitFor, act } from "@testing-library/react";
+import {
+  buildQueryInput,
+  buildOrderInput,
+  useTableData,
+} from "./use-table-data";
 import type { SearchFilters } from "../types";
+import type { TableMetadata } from "../../generator/metadata-generator";
+
+// Mock the GraphQL client module
+vi.mock("../../graphql/graphql-client", () => ({
+  createGraphQLClient: vi.fn(() => ({})),
+  executeQuery: vi.fn(),
+}));
+
+import { executeQuery } from "../../graphql/graphql-client";
 
 describe("buildQueryInput", () => {
   describe("基本的な動作", () => {
@@ -435,3 +449,223 @@ describe("buildOrderInput", () => {
     expect(result![2].field).toBe("updatedAt");
   });
 });
+
+describe("useTableData", () => {
+  const mockTable: TableMetadata = {
+    name: "Task",
+    pluralForm: "tasks",
+    fields: [
+      { name: "id", type: "uuid", description: "", required: true },
+      { name: "title", type: "string", description: "", required: true },
+      { name: "status", type: "string", description: "", required: false },
+      { name: "createdAt", type: "datetime", description: "", required: false },
+    ],
+    relations: [],
+    readAllowedRoles: [],
+  };
+
+  const mockResponse = {
+    tasks: {
+      edges: [
+        { node: { id: "1", title: "Task 1", status: "active" } },
+        { node: { id: "2", title: "Task 2", status: "done" } },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+        endCursor: null,
+      },
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(executeQuery).mockResolvedValue(mockResponse);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("初回マウント時のリクエスト回数", () => {
+    it("初回マウント時にリクエストが1回だけ実行される", async () => {
+      const { result } = renderHook(() =>
+        useTableData(
+          "https://api.example.com/graphql",
+          mockTable,
+          ["title", "status"],
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      );
+
+      // Wait for initial fetch to complete
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      // Verify executeQuery was called exactly once
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+    });
+
+    it("initialSortが指定された場合も初回マウント時にリクエストが1回だけ実行される", async () => {
+      const initialSort = [{ field: "createdAt", direction: "Desc" as const }];
+
+      const { result } = renderHook(() =>
+        useTableData(
+          "https://api.example.com/graphql",
+          mockTable,
+          ["title", "status"],
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          initialSort,
+        ),
+      );
+
+      // Wait for initial fetch to complete
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      // Verify executeQuery was called exactly once
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+
+      // Verify the order parameter was included in the request
+      const callArgs = vi.mocked(executeQuery).mock.calls[0];
+      const variables = callArgs[2] as Record<string, unknown>;
+      expect(variables.order).toEqual([
+        { field: "createdAt", direction: "Desc" },
+      ]);
+    });
+
+    it("searchFiltersが指定された場合も初回マウント時にリクエストが1回だけ実行される", async () => {
+      const searchFilters: SearchFilters = [
+        {
+          field: "status",
+          fieldType: "string",
+          operator: "eq",
+          value: "active",
+        },
+      ];
+
+      const { result } = renderHook(() =>
+        useTableData(
+          "https://api.example.com/graphql",
+          mockTable,
+          ["title", "status"],
+          undefined,
+          searchFilters,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      );
+
+      // Wait for initial fetch to complete
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      // Verify executeQuery was called exactly once
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+
+      // Verify the query parameter was included in the request
+      const callArgs = vi.mocked(executeQuery).mock.calls[0];
+      const variables = callArgs[2] as Record<string, unknown>;
+      expect(variables.query).toEqual({ status: { eq: "active" } });
+    });
+  });
+
+  describe("propsの変更時のリクエスト", () => {
+    it("selectedFieldsが変更された場合に再リクエストが実行される", async () => {
+      const { result, rerender } = renderHook(
+        ({ selectedFields }) =>
+          useTableData(
+            "https://api.example.com/graphql",
+            mockTable,
+            selectedFields,
+          ),
+        { initialProps: { selectedFields: ["title"] } },
+      );
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+
+      // Change selectedFields
+      rerender({ selectedFields: ["title", "status"] });
+
+      // Wait for refetch
+      await waitFor(() => {
+        expect(executeQuery).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    it("同じselectedFieldsで再レンダリングされてもリクエストは増えない", async () => {
+      const selectedFields = ["title", "status"];
+
+      const { result, rerender } = renderHook(
+        ({ fields }) =>
+          useTableData("https://api.example.com/graphql", mockTable, fields),
+        { initialProps: { fields: selectedFields } },
+      );
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+
+      // Rerender with new array reference but same content
+      rerender({ fields: ["title", "status"] });
+
+      // Small delay to ensure no additional requests
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Should still be 1 request (no additional fetch)
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("ソート操作", () => {
+    it("setSortを呼ぶとリクエストが実行される", async () => {
+      const { result } = renderHook(() =>
+        useTableData("https://api.example.com/graphql", mockTable, [
+          "title",
+          "status",
+        ]),
+      );
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(executeQuery).toHaveBeenCalledTimes(1);
+
+      // Trigger sort change
+      act(() => {
+        result.current.setSort("createdAt", "Desc");
+      });
+
+      // Wait for sort fetch
+      await waitFor(() => {
+        expect(executeQuery).toHaveBeenCalledTimes(2);
+      });
+
+      // Verify sort was applied
+      expect(result.current.sortState).toEqual({
+        field: "createdAt",
+        direction: "Desc",
+      });
+    });
+  });
+});

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

@@ -1,32 +1,19 @@
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useMemo, useSyncExternalStore, useRef, useEffect } from "react";
 import type {
   TableMetadata,
   TableMetadataMap,
   ExpandedRelationFields,
 } from "../../generator/metadata-generator";
-import {
-  createGraphQLClient,
-  executeQuery,
-} from "../../graphql/graphql-client";
-import {
-  buildListQuery,
-  type RelationTotalInfo,
-  type ExpandedRelationInfo,
-} from "../../graphql/query-builder";
 import type { SearchFilters } from "../types";
+import { TableDataStore, type PaginationState } from "./table-data-store";
+
+export type { PaginationState } from "./table-data-store";
 
 export interface SortState {
   field: string;
   direction: "Asc" | "Desc";
 }
 
-export interface PaginationState {
-  first: number;
-  after: string | null;
-  hasNextPage: boolean;
-  endCursor: string | null;
-}
-
 export interface TableDataState {
   data: Record<string, unknown>[];
   loading: boolean;
@@ -44,19 +31,6 @@ export interface TableDataState {
   resetPagination: () => void;
 }
 
-type GraphQLListResponse = Record<
-  string,
-  {
-    edges: { node: Record<string, unknown> }[];
-    pageInfo: {
-      hasNextPage: boolean;
-      endCursor: string | null;
-    };
-  }
->;
-
-const DEFAULT_PAGE_SIZE = 20;
-
 /**
  * Build query input from search filters (AND logic)
  * @internal Exported for testing purposes
@@ -116,7 +90,23 @@ export function buildOrderInput(
 }
 
 /**
- * Fetch and manage table data with sorting and pagination
+ * Stable JSON serialization for comparing config objects
+ */
+function stableStringify(obj: unknown): string {
+  if (obj === null || obj === undefined) return "";
+  if (Array.isArray(obj)) {
+    return `[${obj.map(stableStringify).join(",")}]`;
+  }
+  if (typeof obj === "object") {
+    const keys = Object.keys(obj as object).sort();
+    return `{${keys.map((k) => `${k}:${stableStringify((obj as Record<string, unknown>)[k])}`).join(",")}}`;
+  }
+  return String(obj);
+}
+
+/**
+ * Fetch and manage table data with sorting and pagination.
+ * Uses useSyncExternalStore pattern to avoid useEffect chains.
  */
 export function useTableData(
   appUri: string,
@@ -128,255 +118,78 @@ export function useTableData(
   expandedRelationFields?: ExpandedRelationFields,
   initialSort?: SortState[],
 ): TableDataState {
-  const [data, setData] = useState<Record<string, unknown>[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [sortStates, setSortStates] = useState<SortState[]>(initialSort ?? []);
-  const [pagination, setPagination] = useState<PaginationState>({
-    first: DEFAULT_PAGE_SIZE,
-    after: null,
-    hasNextPage: false,
-    endCursor: null,
-  });
-  const [cursorHistory, setCursorHistory] = useState<(string | null)[]>([]);
-
-  // Track previous table name to detect actual table changes (not initial mount)
-  const prevTableNameRef = useRef<string | undefined>(table?.name);
-
-  const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
-
-  // Clear data when table actually changes (not on initial mount)
-  useEffect(() => {
-    // Skip on initial mount - only reset when table changes from one to another
-    if (prevTableNameRef.current === table?.name) {
-      return;
+  // Create stable keys for detecting changes
+  const selectedFieldsKey = selectedFields.join(",");
+  const selectedRelationsKey = selectedRelations?.join(",") ?? "";
+  const searchFiltersKey = stableStringify(searchFilters);
+  const expandedRelationFieldsKey = stableStringify(expandedRelationFields);
+
+  // Store ref to track the current store instance (for cleanup)
+  const storeRef = useRef<TableDataStore | null>(null);
+
+  // Create store synchronously via useMemo
+  // Store is recreated when any relevant config changes
+  // Initial fetch is triggered when useSyncExternalStore subscribes
+  const store = useMemo(() => {
+    // Destroy previous store if exists
+    if (storeRef.current) {
+      storeRef.current.destroy();
     }
-    prevTableNameRef.current = table?.name;
 
-    setData([]);
-    setError(null);
-    setSortStates(initialSort ?? []);
-    setPagination({
-      first: DEFAULT_PAGE_SIZE,
-      after: null,
-      hasNextPage: false,
-      endCursor: null,
+    const newStore = new TableDataStore({
+      appUri,
+      table,
+      selectedFields,
+      selectedRelations,
+      searchFilters,
+      tableMetadataMap,
+      expandedRelationFields,
+      initialSort,
     });
-    setCursorHistory([]);
-    // Note: initialSort is intentionally excluded from deps to prevent infinite loops.
-    // This effect should only run when table changes, using the initialSort value
-    // that was current at mount time.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table?.name]);
-
-  const fetchData = useCallback(async () => {
-    if (!table || selectedFields.length === 0) {
-      setData([]);
-      return;
-    }
-
-    // Validate that selected fields exist in the current table
-    const tableFieldNames = new Set(table.fields.map((f) => f.name));
-    const validFields = selectedFields.filter((f) => tableFieldNames.has(f));
-
-    if (validFields.length === 0) {
-      setData([]);
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      // Always include 'id' field if not already selected
-      const fieldsToFetch = validFields.includes("id")
-        ? validFields
-        : ["id", ...validFields];
 
-      // Also include FK fields for selected manyToOne relations
-      // so that relation data can be fetched later
-      const manyToOneFkFields = (table.relations ?? [])
-        .filter(
-          (r) =>
-            r.relationType === "manyToOne" &&
-            selectedRelations?.includes(r.fieldName),
-        )
-        .map((r) => r.foreignKeyField)
-        .filter((fk) => !fieldsToFetch.includes(fk));
-
-      const allFieldsToFetch = [...fieldsToFetch, ...manyToOneFkFields];
-
-      // Build oneToMany relation total info for selected relations
-      const oneToManyRelationTotals: RelationTotalInfo[] = (
-        table.relations ?? []
-      )
-        .filter(
-          (r) =>
-            r.relationType === "oneToMany" &&
-            selectedRelations?.includes(r.fieldName),
-        )
-        .map((r) => {
-          const targetTable = tableMetadataMap?.[r.targetTable];
-          return {
-            relation: r,
-            targetPluralForm: targetTable?.pluralForm ?? r.targetTable + "s",
-          };
-        });
-
-      // Build expanded manyToOne relation info for inline column display
-      const expandedManyToOneRelations: ExpandedRelationInfo[] = (
-        table.relations ?? []
-      )
-        .filter(
-          (r) =>
-            r.relationType === "manyToOne" &&
-            expandedRelationFields?.[r.fieldName]?.length,
-        )
-        .map((r) => ({
-          relation: r,
-          selectedFields: expandedRelationFields?.[r.fieldName] ?? [],
-        }));
-
-      const query = buildListQuery({
-        tableName: table.name,
-        pluralForm: table.pluralForm,
-        selectedFields: allFieldsToFetch,
-        orderBy: sortStates.length > 0 ? sortStates[0] : undefined,
-        first: pagination.first,
-        after: pagination.after ?? undefined,
-        oneToManyRelationTotals:
-          oneToManyRelationTotals.length > 0
-            ? oneToManyRelationTotals
-            : undefined,
-        expandedManyToOneRelations:
-          expandedManyToOneRelations.length > 0
-            ? expandedManyToOneRelations
-            : undefined,
-      });
-
-      // Build query variables with optional filters from searchFilters
-      const queryVariables: Record<string, unknown> = {};
-      const queryInput = buildQueryInput(searchFilters ?? []);
-      if (queryInput) {
-        queryVariables.query = queryInput;
-      }
-
-      // Add sort order variable (supports multiple sort fields)
-      const orderInput = buildOrderInput(sortStates);
-      if (orderInput) {
-        queryVariables.order = orderInput;
-      }
-
-      // Add pagination variables
-      queryVariables.first = pagination.first;
-      if (pagination.after) {
-        queryVariables.after = pagination.after;
-      }
-
-      const result = await executeQuery<GraphQLListResponse>(
-        client,
-        query,
-        queryVariables,
-      );
-      const responseData = result[table.pluralForm];
-
-      if (responseData) {
-        setData(responseData.edges.map((edge) => edge.node));
-        setPagination((prev) => ({
-          ...prev,
-          hasNextPage: responseData.pageInfo.hasNextPage,
-          endCursor: responseData.pageInfo.endCursor,
-        }));
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to fetch data"));
-      setData([]);
-    } finally {
-      setLoading(false);
-    }
+    storeRef.current = newStore;
+    return newStore;
+    // Recreate store when table, appUri, or any config changes
+    // Using stable keys to avoid unnecessary recreations from reference changes
   }, [
-    table,
-    selectedFields,
-    selectedRelations,
-    sortStates,
-    pagination.first,
-    pagination.after,
-    client,
-    searchFilters,
-    tableMetadataMap,
-    expandedRelationFields,
+    table?.name,
+    appUri,
+    selectedFieldsKey,
+    selectedRelationsKey,
+    searchFiltersKey,
+    expandedRelationFieldsKey,
   ]);
 
-  // Refetch when table, fields, sort, or pagination changes
+  // Cleanup on unmount only
   useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  const setSort = useCallback((field: string, direction?: "Asc" | "Desc") => {
-    setSortStates((prev) => {
-      const currentSort = prev[0];
-      // If clicking the same field, toggle direction
-      if (currentSort?.field === field && !direction) {
-        return [
-          {
-            field,
-            direction: currentSort.direction === "Asc" ? "Desc" : "Asc",
-          },
-        ];
+    return () => {
+      if (storeRef.current) {
+        storeRef.current.destroy();
+        storeRef.current = null;
       }
-      return [{ field, direction: direction ?? "Asc" }];
-    });
-    // Reset pagination when sorting changes
-    setPagination((prev) => ({ ...prev, after: null }));
-    setCursorHistory([]);
-  }, []);
-
-  const nextPage = useCallback(() => {
-    if (pagination.hasNextPage && pagination.endCursor) {
-      // Store current cursor for back navigation (null for first page is valid)
-      setCursorHistory((prev) => [...prev, pagination.after]);
-      // Use endCursor from pageInfo for pagination
-      setPagination((prev) => ({
-        ...prev,
-        after: prev.endCursor,
-      }));
-    }
-  }, [pagination.hasNextPage, pagination.endCursor, pagination.after]);
-
-  const previousPage = useCallback(() => {
-    if (cursorHistory.length > 0) {
-      const newHistory = [...cursorHistory];
-      const previousCursor = newHistory.pop();
-      setCursorHistory(newHistory);
-      setPagination((prev) => ({
-        ...prev,
-        after: previousCursor ?? null,
-      }));
-    }
-  }, [cursorHistory]);
-
-  const resetPagination = useCallback(() => {
-    setPagination({
-      first: DEFAULT_PAGE_SIZE,
-      after: null,
-      hasNextPage: false,
-      endCursor: null,
-    });
-    setCursorHistory([]);
+    };
   }, []);
 
-  return {
-    data,
-    loading,
-    error,
-    sortState: sortStates[0] ?? null,
-    sortStates,
-    pagination,
-    hasPreviousPage: cursorHistory.length > 0 || pagination.after !== null,
-    refetch: fetchData,
-    setSort,
-    nextPage,
-    previousPage,
-    resetPagination,
-  };
+  // Subscribe to store state using useSyncExternalStore
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
+
+  // Return stable action references bound to current store
+  return useMemo(
+    () => ({
+      data: state.data,
+      loading: state.loading,
+      error: state.error,
+      sortState: state.sortStates[0] ?? null,
+      sortStates: state.sortStates,
+      pagination: state.pagination,
+      hasPreviousPage: store.hasPreviousPage,
+      refetch: () => store.fetch(),
+      setSort: (field: string, direction?: "Asc" | "Desc") =>
+        store.setSort(field, direction),
+      nextPage: () => store.nextPage(),
+      previousPage: () => store.previousPage(),
+      resetPagination: () => store.resetPagination(),
+    }),
+    [state, store],
+  );
 }