Delete todo - mutation

In this part of the tutorial, you will learn how to delete existing todo by using GraphQL Mutations.

Let's define a graphql mutation to delete todo.

mutation removeTodo ($id: Int!) {
delete_todos(where: {id: {_eq: $id}}) {
affected_rows
}
}

You will also need to pass in the values for the variables.

Try this mutation in GraphiQL against the application database to see what the response looks like.

Let's now integrate this graphql mutation into our elm app.

We will construct a GraphQL Mutation to update a private todo and integrate it with the elm app.

Import dependencies

Lets import the types, utility functions generated by elm-graphql into our app and construct a GraphQL query

Open src/Main.elm and add the following code:

import Hasura.InputObject
exposing
( Boolean_comparison_exp
, Int_comparison_exp
, Todos_bool_exp
, Todos_insert_input
, Todos_set_input
, Todos_order_by
, buildBoolean_comparison_exp
, buildInt_comparison_exp
, buildTodos_bool_exp
, buildTodos_insert_input
, buildTodos_order_by
, buildTodos_set_input
)
import Hasura.Mutation as Mutation
exposing
( InsertTodosRequiredArguments
, insert_todos
, UpdateTodosOptionalArguments
, UpdateTodosRequiredArguments
+ , DeleteTodosRequiredArguments
)

Construct GraphQL Mutation

We will be constructing a GraphQL mutation as above

updateTodoList : SelectionSet (Maybe MutationResponse) RootMutation -> String -> Cmd Msg
updateTodoList mutation authToken =
makeGraphQLMutation
authToken
mutation
(RemoteData.fromResult >> UpdateTodo)
+deleteSingleTodo : Int -> SelectionSet (Maybe MutationResponse) RootMutation
+deleteSingleTodo todoId =
+ Mutation.delete_todos (setTodoListDeleteWhere todoId) mutationResponseSelection
+
+
+setTodoListDeleteWhere : Int -> DeleteTodosRequiredArguments
+setTodoListDeleteWhere todoId =
+ DeleteTodosRequiredArguments
+ (buildTodos_bool_exp
+ (\args ->
+ { args
+ | id = Present (setTodoListValueForId todoId)
+ }
+ )
+ )
+
+
+delResponseSelection : SelectionSet MutationResponse Hasura.Object.Todos_mutation_response
+delResponseSelection =
+ SelectionSet.map MutationResponse
+ TodosMutation.affected_rows
+
+
+deleteSingleTodoItem : SelectionSet (Maybe MutationResponse) RootMutation -> String -> Cmd Msg
+deleteSingleTodoItem mutation authToken =
+ makeGraphQLMutation
+ authToken
+ mutation
+ (RemoteData.fromResult >> TodoDeleted)

Add Data Types

Lets add new data types required to perform this operation

type alias UpdateTodoItemResponse =
RemoteData (Graphql.Http.Error (Maybe MutationResponse)) (Maybe MutationResponse)
+type alias DeleteTodo =
+ RemoteData (Graphql.Http.Error (Maybe MutationResponse)) (Maybe MutationResponse)

Add new Msg type

Lets add Msg types required to perform this operation

type Msg
= EnteredEmail String
| EnteredPassword String
| EnteredUsername String
| MakeLoginRequest
| MakeSignupRequest
| ToggleAuthForm DisplayForm
| GotLoginResponse LoginResponseParser
| GotSignupResponse SignupResponseParser
| ClearAuthToken
| FetchPrivateDataSuccess TodoData
| InsertPrivateTodo
| UpdateNewTodo String
| InsertPrivateTodoResponse (GraphQLResponse MaybeMutationResponse)
| MarkCompleted Int Bool
| UpdateTodo UpdateTodoItemResponse
+ | DelTodo Int
+ | TodoDeleted DeleteTodo

Handle new Msg types in update

UpdateTodo _ ->
( model
, fetchPrivateTodos model.authData.authToken
)
+ DelTodo id ->
+ let
+ deleteObj =
+ deleteSingleTodo id
+ in
+ ( model, deleteSingleTodoItem deleteObj model.authData.authToken )
+
+ TodoDeleted _ ->
+ ( model
+ , fetchPrivateTodos model.authData.authToken
+ )

Update render functions

viewListItem : Todo -> Html Msg
viewListItem todo =
li []
[ div [ class "view" ]
[ div [ class "round" ]
[ input [ checked todo.is_completed, type_ "checkbox", id (String.fromInt todo.id), onClick (MarkCompleted todo.id todo.is_completed) ] []
, label [ for (String.fromInt todo.id) ] []
]
]
, div
[ classList
[ ( "labelContent", True )
, ( "completed", todo.is_completed )
]
]
[ div [] [ text todo.title ]
]
- , button [ class "closeBtn"]
+ , button [ class "closeBtn", onClick (DelTodo todo.id) ]
[ text "x"
]
]
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