createTodo mutation

src/containers/home/index.tsx

@@ -1,29 +1,55 @@
-import React, { FC } from 'react';
+import React, { ChangeEvent, FC, FormEvent, useState } from 'react';
 
 import TodoList from './TodoList';
 import { Button } from '../../components/button';
 import { Container } from '../../components/container';
 
-import { useListTodos } from '../../core/services/todo';
+import { useListTodos } from '../../core/services/listTodo';
+import { useCreateTodo } from '../../core/services/createTodo';
 
 export const Home: FC = () => {
+  const [todoTitle, setTodoTitle] = useState<string>('');
   const { loading, error, data } = useListTodos();
+  const { createTodo } = useCreateTodo(todoTitle);
 
-  if (error) {
-    return <p>Sorry...</p>;
-  }
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTodoTitle(() => e.target.value);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    createTodo();
+  };
 
   return (
     <Container>
       <h1>Your tasks</h1>
       <p>Hi there!</p>
-      {!loading && !!data && <TodoList todos={data.listTodos} />}
-      <Button primary onClick={() => console.log('Clicked Normal Button')}>
-        Normal Button
-      </Button>
-      <Button primary onClick={() => console.log('Clicked Primary Button')}>
-        Primary Button
-      </Button>
+      {error ? (
+        <h3>{error.message}. Sorry...</h3>
+      ) : (
+        !loading &&
+        !!data && (
+          <>
+            <TodoList todos={data.listTodos} />
+            <form onSubmit={handleSubmit}>
+              <input type="text" value={todoTitle} onChange={handleChange} />
+              <Button
+                primary={false}
+                onClick={() => console.log('Clicked Normal Button')}
+              >
+                Normal Button
+              </Button>
+              <Button
+                primary
+                onClick={() => console.log('Clicked Primary Button')}
+              >
+                Primary Button
+              </Button>
+            </form>
+          </>
+        )
+      )}
     </Container>
   );
 };

src/core/services/createTodo.ts

@@ -0,0 +1,23 @@
+import { gql, useMutation } from '@apollo/client';
+
+import Todo from '../models/todo';
+
+const CREATE_TODO = gql`
+  mutation CreateTodo($title: String!) {
+    createTodo(title: $title) {
+      todo {
+        todoId
+        title
+        isDone
+      }
+    }
+  }
+`;
+
+export const useCreateTodo = (todoTitle: string) => {
+  const [createTodo, result] = useMutation<
+    { createTodo: Todo },
+    { title: string }
+  >(CREATE_TODO, { variables: { title: todoTitle } });
+  return { createTodo, result };
+};