@izumisy-tailor/tailor-data-viewer 0.2.33 → 0.3.0

package/src/component/collection/use-collection.ts

@@ -1,36 +1,19 @@
 import { useCallback, useMemo, useState } from "react";
 import type { TableMetadata } from "../../generator/metadata-generator";
 import type {
+  BuildQueryVariables,
+  CollectionVariables,
   Filter,
   FilterOperator,
   TableMetadataFilter,
   PageInfo,
-  QueryVariables,
+  PaginationVariables,
   SortState,
   UseCollectionOptions,
   UseCollectionReturn,
-  ExtractQueryVariables,
-  ValidateCollectionQuery,
 } from "../types";
 import type { TableFieldName, TableOrderableFieldName } from "../types";
 
-/**
- * Resolves the variables type for `toQueryArgs()` return value.
- *
- * When the query document carries gql-tada type information
- * (`ExtractQueryVariables` resolves to a concrete type), uses that type
- * so the result is directly compatible with `useQuery()` from urql.
- * Otherwise falls back to `QueryVariables`.
- *
- * Note: The runtime value is always `QueryVariables`, but the gql-tada
- * variables type is structurally compatible (a supertype), so the cast
- * is safe.
- */
-type ResolveVariables<TQuery> =
-  ExtractQueryVariables<TQuery> extends never
-    ? QueryVariables
-    : ExtractQueryVariables<TQuery>;
-
 // -----------------------------------------------------------------------------
 // Overload signatures
 // -----------------------------------------------------------------------------
@@ -39,38 +22,42 @@ type ResolveVariables<TQuery> =
  * Hook for managing collection query parameters (filters, sort, pagination)
  * with metadata-based field name typing and automatic `fieldType` detection.
  *
- * `toQueryArgs()` returns `{ query, variables }` so the result can be
- * spread directly into `useQuery()`.
+ * Returns `variables` with `query`, `order`, and `pagination` sub-properties
+ * that can be mapped to GraphQL query variables.
  *
  * @example
  * ```tsx
  * import { tableMetadata } from "./generated/data-viewer-metadata.generated";
  *
- * const collection = useCollection({
+ * const { variables } = useCollectionVariables({
  *   tableMetadata: tableMetadata.task,
- *   query: GET_TASKS,
  *   params: { pageSize: 20 },
  * });
- * const [result] = useQuery({ ...collection.toQueryArgs() });
+ * const { query, order, pagination } = variables;
+ * const [result] = useQuery({
+ *   query: GET_TASKS,
+ *   variables: { ...pagination, query, order },
+ * });
  * ```
  */
-export function useCollection<const TTable extends TableMetadata, TQuery>(
+export function useCollectionVariables<const TTable extends TableMetadata>(
   options: UseCollectionOptions<
     TableFieldName<TTable>,
     TableMetadataFilter<TTable>
   > & {
     tableMetadata: TTable;
-    query: ValidateCollectionQuery<
-      TQuery,
-      TableFieldName<TTable>,
-      TableOrderableFieldName<TTable>
-    >;
   },
 ): UseCollectionReturn<
   TableFieldName<TTable>,
   {
-    query: TQuery;
-    variables: ResolveVariables<TQuery>;
+    query: BuildQueryVariables<TTable> | undefined;
+    order:
+      | {
+          field: TableOrderableFieldName<TTable>;
+          direction: "Asc" | "Desc";
+        }[]
+      | undefined;
+    pagination: PaginationVariables;
   },
   TableMetadataFilter<TTable>
 >;
@@ -78,38 +65,34 @@ export function useCollection<const TTable extends TableMetadata, TQuery>(
 /**
  * Hook for managing collection query parameters (filters, sort, pagination).
  *
- * Produces `variables` in Tailor Platform format that can be passed directly
- * to a GraphQL query (e.g. urql's `useQuery`) via `toQueryArgs()`.
- *
- * `toQueryArgs()` returns `{ query, variables }` so the result can be spread
- * directly into `useQuery()`.
+ * Returns `variables` with `query`, `order`, and `pagination` sub-properties
+ * that can be mapped to GraphQL query variables.
  *
  * @example
  * ```tsx
- * const collection = useCollection({ query: GET_ORDERS, params: { pageSize: 20 } });
- * const [result] = useQuery({ ...collection.toQueryArgs() });
+ * const { variables } = useCollectionVariables({ params: { pageSize: 20 } });
+ * const { query, order, pagination } = variables;
+ * const [result] = useQuery({
+ *   query: GET_ORDERS,
+ *   variables: { ...pagination, query, order },
+ * });
  * ```
  */
-export function useCollection<TQuery>(
+export function useCollectionVariables(
   options: UseCollectionOptions & {
-    query: TQuery;
     tableMetadata?: never;
   },
-): UseCollectionReturn<
-  string,
-  { query: TQuery; variables: ResolveVariables<TQuery> }
->;
+): UseCollectionReturn<string, CollectionVariables>;
 
 // -----------------------------------------------------------------------------
 // Implementation
 // -----------------------------------------------------------------------------
-export function useCollection(
+export function useCollectionVariables(
   options: UseCollectionOptions & {
     tableMetadata?: TableMetadata;
-    query: unknown;
   },
-): UseCollectionReturn<string, { query: unknown; variables: QueryVariables }> {
-  const { params = {}, query: queryDocument } = options;
+): UseCollectionReturn<string, CollectionVariables> {
+  const { params = {} } = options;
   const {
     initialFilters = [],
     initialSort = [],
@@ -270,56 +253,51 @@ export function useCollection(
       : currentPageInfo.hasNextPage;
 
   // ---------------------------------------------------------------------------
-  // Build query variables (Tailor Platform format)
+  // Build collection variables (Tailor Platform format)
   // ---------------------------------------------------------------------------
-  const variables = useMemo<QueryVariables>(() => {
-    const vars: QueryVariables = {};
-
-    // Pagination direction determines first/after vs last/before
-    if (paginationDirection === "forward") {
-      vars.first = pageSize;
-      if (cursor) {
-        vars.after = cursor;
-      }
-    } else {
-      vars.last = pageSize;
-      if (cursor) {
-        vars.before = cursor;
-      }
+  const queryVars = useMemo(() => {
+    if (filters.length === 0) return undefined;
+    const filterQuery: Record<string, Record<string, unknown>> = {};
+    for (const filter of filters) {
+      filterQuery[filter.field] = { [filter.operator]: filter.value };
     }
+    return filterQuery;
+  }, [filters]);
 
-    // Build query (filters)
-    if (filters.length > 0) {
-      const filterQuery: Record<string, unknown> = {};
-      for (const filter of filters) {
-        filterQuery[filter.field] = { [filter.operator]: filter.value };
-      }
-      vars.query = filterQuery;
-    }
+  const orderVars = useMemo(() => {
+    if (sortStates.length === 0) return undefined;
+    return sortStates.map((s) => ({
+      field: s.field,
+      direction: s.direction,
+    }));
+  }, [sortStates]);
 
-    // Build order (sort)
-    if (sortStates.length > 0) {
-      vars.order = sortStates.map((s) => ({
-        field: s.field,
-        direction: s.direction,
-      }));
+  const paginationVars = useMemo<PaginationVariables>(() => {
+    const p: PaginationVariables = {};
+    if (paginationDirection === "forward") {
+      p.first = pageSize;
+      if (cursor) p.after = cursor;
+    } else {
+      p.last = pageSize;
+      if (cursor) p.before = cursor;
     }
+    return p;
+  }, [pageSize, cursor, paginationDirection]);
 
-    return vars;
-  }, [filters, sortStates, pageSize, cursor, paginationDirection]);
-
-  // ---------------------------------------------------------------------------
-  // toQueryArgs
-  // ---------------------------------------------------------------------------
-  const toQueryArgs = useCallback(() => {
-    return { query: queryDocument, variables };
-  }, [queryDocument, variables]);
+  const variables = useMemo<CollectionVariables>(
+    () => ({
+      query: queryVars,
+      order: orderVars,
+      pagination: paginationVars,
+    }),
+    [queryVars, orderVars, paginationVars],
+  );
 
   // ---------------------------------------------------------------------------
   // Return
   // ---------------------------------------------------------------------------
   return {
-    toQueryArgs,
+    variables,
     filters,
     // Cast needed: implementation accepts FilterOperator (widest),
     // but overload signatures narrow via OperatorForField<TFilter, F>.