Add useDynamicMutation hook (#130)

* Add useDynamicMutation hook

* Incorporate PR feedback

examples/3-mutation/src/Dog.re

@@ -62,9 +62,11 @@ let make =
       [|id|],
     );
 
+  // Example of using hooks with graphql_ppx_re (or graphql_ppx)
   let (_, executeLikeMutation) =
     Hooks.useMutation(~request=Mutations.LikeDog.make(~key=id, ()));
 
+  // Example of using hooks without graphql_ppx_re (or graphql_ppx)
   let (_, executeTreatMutation) =
     Hooks.useMutation(
       ~request={
@@ -74,6 +76,14 @@ let make =
       },
     );
 
+  // Example of using hooks where the variables are only known when the
+  // mutation runs
+  let (_, executePatMutation) =
+    Hooks.useDynamicMutation(
+      ~query=Mutations.PatDog.query,
+      ~parse=Mutations.PatDog.parse,
+    );
+
   <div className=DogStyles.container>
     <img src=imageUrl alt=name className=DogStyles.image />
     <h3 className=DogStyles.title> {j|$name|j}->React.string </h3>
@@ -84,22 +94,21 @@ let make =
         hex="48a9dc"
         onClick={_ => executeLikeMutation() |> ignore}
       />
-      <Mutation request={Mutations.PatDog.make(~key=id, ())}>
-        ...{({executeMutation}) =>
-          <EmojiButton
-            emoji={j|✋|j}
-            count={string_of_int(pats)}
-            hex="db4d3f"
-            onClick={_ => executeMutation() |> ignore}
-          />
+      <EmojiButton
+        emoji={j|✋|j}
+        count={string_of_int(pats)}
+        hex="db4d3f"
+        onClick={_ =>
+          executePatMutation(Mutations.PatDog.make(~key=id, ())) |> ignore
         }
-      </Mutation>
+      />
       <EmojiButton
         emoji={j|🍖|j}
         count={string_of_int(treats)}
         hex="7b16ff"
         onClick={_ => executeTreatMutation() |> ignore}
       />
+      // Example of using the Mutation component
       <Mutation request={Mutations.BellyscratchDog.make(~key=id, ())}>
         ...{({executeMutation}) =>
           <EmojiButton

src/hooks/UrqlUseMutation.re

@@ -61,3 +61,21 @@ let useMutation = (~request) => {
 
   (response, executeMutation);
 };
+
+let useDynamicMutation = (~query, ~parse) => {
+  let (responseJs, executeMutationJs) = useMutationJs(query);
+
+  let response =
+    React.useMemo1(
+      () => responseJs |> urqlResponseToReason(parse),
+      [|responseJs|],
+    );
+
+  let executeMutation =
+    React.useCallback1(
+      request => executeMutationJs(Some(request##variables)),
+      [|executeMutationJs|],
+    );
+
+  (response, executeMutation);
+};

src/hooks/UrqlUseMutation.rei

@@ -4,3 +4,11 @@ let useMutation:
     UrqlTypes.hookResponse('response),
     unit => Js.Promise.t(UrqlClient.ClientTypes.operationResult),
   );
+
+let useDynamicMutation:
+  (~query: string, ~parse: Js.Json.t => 'response) =>
+  (
+    UrqlTypes.hookResponse('response),
+    {.. "variables": Js.Json.t} =>
+    Js.Promise.t(UrqlClient.ClientTypes.operationResult),
+  );