Remove todos integration

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

githubGraphQLQueries.re
// 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.

githubTodoItem.re
+<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.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin
graphql-handbook