diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx
index 2db5824..7f56d7a 100644
--- a/src/containers/home/index.tsx
+++ b/src/containers/home/index.tsx
@@ -1,23 +1,14 @@
 import React, { FC } from 'react';
-import { gql, useQuery } from '@apollo/client';
 
 import TodoList from './TodoList';
 import { Button } from '../../components/button';
 import { Container } from '../../components/container';
 
-const LIST_TODOS = gql`
-  query ListAll {
-    listTodos {
-      todoId
-      title
-      isDone
-    }
-  }
-`;
+import { useListTodos } from '../../core/services/todo';
 
 export const Home: FC = () => {
-  // const todos: Todo[] = listTodos();
-  const { loading, error, data } = useQuery(LIST_TODOS);
+  const { loading, error, data } = useListTodos();
+
   if (error) {
     return <p>Sorry...</p>;
   }
@@ -26,7 +17,7 @@ export const Home: FC = () => {
     <Container>
       <h1>Your tasks</h1>
       <p>Hi there!</p>
-      {!loading && <TodoList todos={data.listTodos} />}
+      {!loading && !!data && <TodoList todos={data.listTodos} />}
       <Button primary onClick={() => console.log('Clicked Normal Button')}>
         Normal Button
       </Button>
diff --git a/src/core/services/todo.ts b/src/core/services/todo.ts
index b75a63b..3ad7980 100644
--- a/src/core/services/todo.ts
+++ b/src/core/services/todo.ts
@@ -1,16 +1,18 @@
+import { gql, useQuery } from '@apollo/client';
+
 import Todo from '../models/todo';
 
-export const listTodos = (): Todo[] => {
-  return [
-    {
-      todoId: '1',
-      title: 'test',
-      isDone: false
-    },
-    {
-      todoId: '2',
-      title: 'second',
-      isDone: true
+const LIST_TODOS = gql`
+  query ListAll {
+    listTodos {
+      todoId
+      title
+      isDone
     }
-  ];
+  }
+`;
+
+export const useListTodos = () => {
+  const { loading, error, data } = useQuery<{ listTodos: Todo[] }>(LIST_TODOS);
+  return { loading, error, data };
 };