Remove getOperation function in children props (#152)

* Remove getOperation function

* Fix conflict

* Fix exmaple app

* Add a changeset

* Remove TData

* Modified changeset

Author: IzumiSy

.changeset/quick-teachers-melt.md

@@ -0,0 +1,7 @@
+---
+"@fabrix-framework/fabrix": minor
+---
+
+Remove `getOperation` function from children props in FabrixComponent.
+
+Now `query` prop in `FabrixComponent` supports only a single query to get it future compatible with TypedDocumentNode.

examples/vite-todoapp/src/App.tsx

@@ -32,7 +32,11 @@ function App() {
               id
             }
           }
-
+        `}
+      />
+      <FabrixComponent
+        containerClassName={containerClassName}
+        query={gql`
           query todos {
             allTodos
               @fabrixView(

packages/fabrix/__tests__/componentRegistry.test.tsx

@@ -136,7 +136,7 @@ describe("getFabrixComponent", () => {
           title: "Custom Table",
         }}
         query={gql`
-          query getUsers {
+          query {
             users {
               collection {
                 id
@@ -149,9 +149,7 @@ describe("getFabrixComponent", () => {
       >
         {({ getComponent }) => {
           return (
-            <div data-testid="component-wrapper">
-              {getComponent("getUsers", "users")}
-            </div>
+            <div data-testid="component-wrapper">{getComponent("users")}</div>
           );
         }}
       </CustomTable>,

packages/fabrix/__tests__/query.test.tsx

@@ -84,21 +84,10 @@ describe("collection", () => {
   const testPatterns = [
     ["collection", collectionQuery, undefined],
     ["edges", edgeQuery, undefined],
-    [
-      "getOperation",
-      collectionQuery,
-      ({ getOperation }) => getOperation("getUsers"),
-    ],
-    [
-      "getOperation/getComponent",
-      collectionQuery,
-      ({ getOperation }) =>
-        getOperation("getUsers", ({ getComponent }) => getComponent("users")),
-    ],
     [
       "getComponent",
       collectionQuery,
-      ({ getComponent }) => getComponent("getUsers", "users"),
+      ({ getComponent }) => getComponent("users"),
     ],
   ] satisfies [string, string, FabrixComponentChildrenProps][];
 
@@ -236,12 +225,19 @@ describe("collection", () => {
 
   it("should be able to access the response data for by an operation", async () => {
     await testWithUnmount(
-      <FabrixComponent query={`query getUsers { users { size } }`}>
-        {({ getOperation }) =>
-          getOperation<{ users: { size: number } }>("getUsers", ({ data }) => (
-            <div role="result-size">{data.users.size}</div>
-          ))
-        }
+      <FabrixComponent
+        query={`
+          query getUsers {
+            users {
+              size
+            }
+          }
+        `}
+      >
+        {({ data }) => (
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          <div role="result-size">{data.users.size}</div>
+        )}
       </FabrixComponent>,
       async () => {
         const result = await screen.findByRole("result-size");

packages/fabrix/src/fetcher.ts

@@ -4,10 +4,10 @@ import { useClient, useQuery } from "urql";
 export const useDataFetch = (props: {
   query: DocumentNode | string;
   variables?: Record<string, unknown>;
+  pause?: boolean;
 }) => {
   const [{ data, fetching, error }] = useQuery<FabrixComponentData>({
-    query: props.query,
-    variables: props.variables,
+    ...props,
   });
 
   return {

packages/fabrix/src/renderer.tsx

@@ -1,5 +1,5 @@
 import { DirectiveNode, DocumentNode, OperationTypeNode, parse } from "graphql";
-import { ReactNode, useCallback, useContext, useMemo } from "react";
+import { ReactNode, useContext, useMemo } from "react";
 import { findDirective, parseDirectiveArguments } from "@directive";
 import { ViewRenderer } from "@renderers/fields";
 import { FormRenderer } from "@renderers/form";
@@ -185,57 +185,25 @@ export type FabrixComponentProps = FabrixComponentCommonProps & {
 
 type FabrixComponentChildrenExtraProps = { key?: string; className?: string };
 
-type FabrixGetComponentFn = (
-  /**
-   * The name that corresponds to the GQL query.
-   */
-  name: string,
-  extraProps?: FabrixComponentChildrenExtraProps,
-  fieldsRenderer?: FabrixComponentFieldsRenderer,
-) => ReactNode;
-
-export type FabrixGetOperationFn = <
-  T extends Record<string, unknown> = Record<string, unknown>,
->(
-  indexOrName: number | string,
-  renderer?: (props: {
-    data: T;
-    getComponent: FabrixGetComponentFn;
-  }) => ReactNode,
-) => ReactNode;
-
 export type FabrixComponentChildrenProps = {
   /**
-   * Get the operation result by operation name or index
-   *
-   * ```tsx
-   * <FabrixComponent query={getUsersQuery}>
-   *   {({ getOperation }) => (
-   *     {getOperation("getUsers", ({ data, getComponent }) => (
-   *       <>
-   *         <h2>{data.users.size} users</h2>
-   *         {getComponent("users")}
-   *       </>
-   *     ))}
-   *   )}
-   * </FabrixComponent>
-   * ```
+   * The data fetched from the query
    */
-  getOperation: FabrixGetOperationFn;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any;
 
   /**
    * Get the component by root field name
    *
    * ```tsx
    * <FabrixComponent query={getUsersQuery}>
    *   {({ getComponent }) => (
-   *     {getComponent("getUsers", "users")}
+   *     {getComponent("users")}
    *   )}
    * </FabrixComponent>
    * ```
    */
   getComponent: (
-    operationIndexOrName: number | string,
     rootFieldName: string,
     extraProps?: FabrixComponentChildrenExtraProps,
     fieldsRenderer?: FabrixComponentFieldsRenderer,
@@ -306,48 +274,41 @@ export const getComponentRendererFn = (
   props: FabrixComponentProps,
   getComponent: ReturnType<typeof getComponentFn>,
 ) => {
+  const context = useContext(FabrixContext);
   const { fieldConfigs } = useFieldConfigs(props.query);
-  const getOperation: FabrixComponentChildrenProps["getOperation"] =
-    useCallback(
-      (indexOrName, renderer) => {
-        const fieldConfig =
-          typeof indexOrName === "number"
-            ? fieldConfigs[indexOrName]
-            : fieldConfigs.find(({ name }) => name == indexOrName);
-        if (!fieldConfig) {
-          throw new Error(`No operation found for indexOrName: ${indexOrName}`);
-        }
-
-        return (
-          <OperationRenderer
-            key={`fabrix-operation${typeof indexOrName === "number" ? `-${indexOrName}` : ""}-${fieldConfig.name}`}
-            operation={fieldConfig}
-            variables={props.variables}
-            getComponentFn={getComponent}
-            renderer={renderer as Parameters<FabrixGetOperationFn>[1]}
-          />
-        );
-      },
-      [fieldConfigs, props.variables],
-    );
+  const fieldConfig = fieldConfigs[0];
+  if (!fieldConfig) {
+    throw new Error(`No operation found`);
+  }
 
   return () => {
+    const { fetching, error, data } = useDataFetch({
+      query: fieldConfig.document,
+      variables: props.variables,
+      pause: fieldConfig.type !== OperationTypeNode.QUERY,
+    });
+
+    if (fetching) {
+      return <Loader />;
+    }
+
+    if (error) {
+      throw error;
+    }
+
+    const component = getComponent(fieldConfig, data, context);
     if (props.children) {
       return props.children({
-        getOperation,
-        getComponent: (
-          operationIndexOrName,
-          rootFieldName,
-          extraProps,
-          fieldsRenderer,
-        ) =>
-          getOperation(operationIndexOrName, ({ getComponent }) =>
-            getComponent(rootFieldName, extraProps, fieldsRenderer),
-          ),
+        data,
+        getComponent: component,
       });
     }
 
-    return fieldConfigs.map((_, i) => getOperation(i));
+    return fieldConfig.fields.map((field) =>
+      component(field.name, {
+        key: `fabrix-${fieldConfig.name}-${field.name}`,
+      }),
+    );
   };
 };
 
@@ -362,7 +323,7 @@ export const getComponentFn =
   (props: FabrixComponentProps, rendererFn: RendererFn) =>
   (
     fieldConfig: FieldConfigs,
-    data: FabrixComponentData,
+    data: FabrixComponentData | undefined,
     context: FabrixContextType,
   ) =>
   (
@@ -375,81 +336,14 @@ export const getComponentFn =
       throw new Error(`No root field found for name: ${name}`);
     }
 
+    const dataByName = data ? (name in data ? data[name] : {}) : {};
+
     return (
       <div
         key={extraProps?.key}
         className={`fabrix renderer container ${props.containerClassName ?? ""} ${extraProps?.className ?? ""}`}
       >
-        {rendererFn(field, data[name], context, componentFieldsRenderer)}
+        {rendererFn(field, dataByName, context, componentFieldsRenderer)}
       </div>
     );
   };
-
-type GetComponentFn = (
-  op: FieldConfigs,
-  data: FabrixComponentData,
-  context: FabrixContextType,
-) => FabrixGetComponentFn;
-
-type RendererCommonProps = {
-  key: string;
-  operation: FieldConfigs;
-  variables: Record<string, unknown> | undefined;
-  renderer?: Parameters<FabrixGetOperationFn>[1];
-  getComponentFn: GetComponentFn;
-  extraClassName?: string;
-};
-
-const OperationRenderer = (props: RendererCommonProps) => {
-  return props.operation.type === OperationTypeNode.MUTATION ? (
-    <MutateOperationRenderer {...props} />
-  ) : (
-    <QueryOperationRenderer {...props} />
-  );
-};
-
-const QueryOperationRenderer = ({
-  operation,
-  variables,
-  renderer,
-  getComponentFn,
-}: RendererCommonProps) => {
-  const context = useContext(FabrixContext);
-  const { fetching, error, data } = useDataFetch({
-    query: operation.document,
-    variables,
-  });
-
-  if (fetching || !data) {
-    return <Loader />;
-  }
-
-  if (error) {
-    throw error;
-  }
-
-  const getComponent = getComponentFn(operation, data, context);
-  return renderer
-    ? renderer({ data, getComponent })
-    : operation.fields.map((field) =>
-        getComponent(field.name, {
-          key: `fabrix-query-${operation.name}-${field.name}`,
-        }),
-      );
-};
-
-const MutateOperationRenderer = ({
-  operation,
-  renderer,
-  getComponentFn,
-}: RendererCommonProps) => {
-  const context = useContext(FabrixContext);
-  const getComponent = getComponentFn(operation, {}, context);
-  return renderer
-    ? renderer({ data: {}, getComponent })
-    : operation.fields.map((field) =>
-        getComponent(field.name, {
-          key: `fabrix-mutation-${operation.name}-${field.name}`,
-        }),
-      );
-};