introduces useActionForm

Author: infiton

packages/api-client-core/spec/mockUrqlClient.ts

@@ -74,8 +74,10 @@ const newMockOperationFn = (assertions?: (request: GraphQLRequest) => void) => {
 
   const fn = jest.fn((request: GraphQLRequest, options?: Partial<OperationContext>) => {
     const { query } = request;
+
     const fetchOptions = options?.fetchOptions;
     const key = graphqlDocumentName(query) ?? "unknown";
+
     subjects[key] ??= makeSubject<OperationResult>();
 
     if (fetchOptions && typeof fetchOptions != "function") {
@@ -99,6 +101,7 @@ const newMockOperationFn = (assertions?: (request: GraphQLRequest) => void) => {
     if (!subjects[key]) {
       throw new Error(`No mock client subject started for key ${key}, options are ${Object.keys(subjects).join(", ")}`);
     }
+
     act(() => {
       subjects[key].next({
         operation: null as any,

packages/react/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@gadgetinc/api-client-core": "^0.15.11",
     "react-fast-compare": "^3.2.2",
+    "react-hook-form": "^7.46.1",
     "urql": "^4.0.4"
   },
   "resolutions": {

packages/react/spec/useAction.spec.tsx

@@ -463,6 +463,67 @@ describe("useAction", () => {
     });
   });
 
+  test("generates correct mutation and variables if there is an ambiguous field", async () => {
+    let variables: AnyVariables;
+
+    const client = createMockUrqlClient({
+      mutationAssertions: (request) => {
+        variables = request.variables;
+      },
+    });
+
+    const wrapper = (props: { children: React.ReactNode }) => <Provider value={client}>{props.children}</Provider>;
+
+    const { result } = renderHook(() => useAction(relatedProductsApi.ambiguous.update), {
+      wrapper,
+    });
+
+    let mutationPromise: any;
+    act(() => {
+      mutationPromise = result.current[1]({ id: "123", ambiguous: { ambiguous: "foo", booleanField: true } });
+    });
+
+    expect(client.executeMutation).toBeCalledTimes(1);
+
+    client.executeMutation.pushResponse("updateAmbiguous", {
+      data: {
+        updateAmbiguous: {
+          success: true,
+          ambiguous: {
+            id: "123",
+            ambiguous: "foo",
+            booleanField: true,
+          },
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    await act(async () => {
+      const promiseResult = await mutationPromise;
+      expect(promiseResult.data).toMatchInlineSnapshot(`
+        {
+          "ambiguous": "foo",
+          "booleanField": true,
+          "id": "123",
+        }
+      `);
+      expect(promiseResult.fetching).toBe(false);
+      expect(promiseResult.error).toBeFalsy();
+    });
+
+    expect(variables).toMatchInlineSnapshot(`
+      {
+        "ambiguous": {
+          "ambiguous": "foo",
+          "booleanField": true,
+        },
+        "id": "123",
+      }
+    `);
+  });
+
   test("should throw if called without a model api identifier and there is an ambiguous field", async () => {
     let caughtError = null;