Remove todos integration

Lets define the graphql mutation to delete the todo. Open src/GraphQLQueries.re and add the following code below everything else:

GraphQLQueries.re

Copy
// GraphQL mutation for removing a todo
module DeleteMyTodo = [%graphql
  {|
    mutation removeTodo ($id: Int!) {
      delete_todos(where: {id: {_eq: $id}}) {
        affected_rows
      }
    }
  |}
];
module DeleteMyTodoMutation = ReasonApollo.CreateMutation(DeleteMyTodo);

Lets integrate this mutation such that, clicking the cross button next to a todo would remove that todo. Go to src/todo/TodoItem.re, and wrap the x button with the DeleteMyTodoMutation component that we defined above.

TodoItem.re

Copy
+<GraphQLQueries.DeleteMyTodoMutation>
+  ...{
+    (deleteTodo, _) => {
+      let removeTodo = GraphQLQueries.DeleteMyTodo.make(~id=todo##id, ());
-     <button className="closeBtn">
+      <button
+        className="closeBtn"
+        onClick={
+          ev => {
+            deleteTodo(
+              ~variables=removeTodo##variables,
+              ~refetchQueries=[|"getMyTodos"|],
+              ()
+            ) |> ignore;
+          }
+        }
+      >
        {ReasonReact.string("x")}
      </button>
+    }
+  }
+</GraphQLQueries.DeleteMyTodoMutation>

In the above code snippet, we are calling the deleteTodo mutation in the onClick handler of the button. We call the mutation with variables and the refetchQueries arguments such that the appropriate todo gets deleted and the database is in sync with the client. Try it out.

Awesome. You have integrated the delete mutation.