Skip to content

Instantly share code, notes, and snippets.

@ericwooley

ericwooley/todoList.tsx Secret

Last active Apr 4, 2021
Embed
What would you like to do?
add todo mutation
import React from 'react';
import {
useMyListsQuery,
useCreateListMutation,
useAddTodoItemMutation,
} from '@the-wooley-devbox/graphql-sdk';
export const TodoList = () => {
const [createList] = useCreateListMutation();
const [addTodoItem] = useAddTodoItemMutation();
const { data, loading, error, refetch } = useMyListsQuery({ ssr: false });
if (loading || !data) return <h3>Loading...</h3>;
if (error)
return (
<h3>
Uh oh, something went wrong!
<hr />
<button onClick={() => refetch()}>Try again</button>
</h3>
);
return (
<div>
<h3>
My Lists ({`${data.myLists.length}`}){' '}
<button
onClick={() => {
createList({
variables: {
name:
prompt('What do you want to name your list?') ||
'Untitled List',
},
}).then(() => refetch());
}}
>
+
</button>
:
</h3>
{data.myLists.length === 0 && (
<h4>Looks like you don't have any lists yet.</h4>
)}
{data.myLists.map((list) => (
<div key={list.id}>
<h4>{list.name} </h4>
{list.items
?.slice()
.sort((a, b) => {
return parseInt(a.id, 10) - parseInt(b.id, 10);
})
.map((todo) => (
<div key={todo.id}>
<input type="checkbox" checked={todo.done} />
&nbsp;
<strong>{todo.name}</strong>
</div>
))}
<button
onClick={() => {
addTodoItem({
variables: {
listId: parseInt(list.id, 10),
todoName:
prompt('What do you want to name your todo?') ||
'Untitled Todo',
},
}).then(() => refetch());
}}
>
+ Add Todo Item
</button>
<hr />
</div>
))}
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment