Remove todos - Integration

Let us integrate the remove todos feature in our React Native app. Firstly import gql and define the mutation in src/screens/components/Todo/TodoItem/js.

githubTodoItem.js
+ import gql from 'graphql-tag';
+ const REMOVE_TODO = gql`
+ mutation ($id: Int) {
+ delete_todos (
+ where: {
+ id: {
+ _eq: $id
+ }
+ }
+ ) {
+ affected_rows
+ }
+ }
+`;

Now, in the render method of the TodoItem component, update the deleteButton function to wrap the button JSX with a Mutation component.

const deleteButton = () => {
if (isPublic) return null;
- const remove = () => {
- if (loading) { return; }
- };
return (
+ <Mutation
+ mutation={DELETE_TODO}
+ update={(cache) => {
+ const data = cache.readQuery({
+ query: FETCH_TODOS,
+ variables: {
+ isPublic,
+ }
+ });
+ const newData = {
+ todos: data.todos.filter((t) => t.id !== item.id)
+ }
+ cache.writeQuery({
+ query: FETCH_TODOS,
+ variables: {
+ isPublic,
+ },
+ data: newData
+ });
+ }}
+ >
+ {
+ (deleteTodo, { loading, error }) => {
+ const remove = () => {
+ if (loading) { return; }
+ deleteTodo({
+ variables: { id: item.id }
+ });
+ };
+ return (
<View style={styles.deleteButton}>
<Icon
name="delete"
size={26}
onPress={remove}
disabled={loading}
color={loading ? "lightgray" : "#BC0000"}
/>
</View>
+ );
+ }
+ }
+ </Mutation>
)
}

This was done similar to the insert_todos mutation. We have also updated the cache in the update function. With this, we have a fully functional todo app working :)