query data using graphql

src/containers/home/TodoList.tsx

@@ -10,7 +10,7 @@ const TodoList: FC<Props> = ({ todos }) => (
   <div>
     <ul>
       {todos.map((todo) => (
-        <li key={todo.id}>
+        <li key={todo.todoId}>
           {todo.title}, status: {todo.isDone ? 'Done' : 'In Progress'}
         </li>
       ))}

src/containers/home/index.tsx

@@ -1,20 +1,32 @@
 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';
 
-import Todo from '../../core/models/todo';
+const LIST_TODOS = gql`
-import { listTodos } from '../../core/services/todo';
+  query ListAll {
+    listTodos {
+      todoId
+      title
+      isDone
+    }
+  }
+`;
 
 export const Home: FC = () => {
-  const todos: Todo[] = listTodos();
+  // const todos: Todo[] = listTodos();
+  const { loading, error, data } = useQuery(LIST_TODOS);
+  if (error) {
+    return <p>Sorry...</p>;
+  }
 
   return (
     <Container>
       <h1>Your tasks</h1>
       <p>Hi there!</p>
-      <TodoList todos={todos} />
+      {!loading && <TodoList todos={data.listTodos} />}
       <Button primary onClick={() => console.log('Clicked Normal Button')}>
         Normal Button
       </Button>

src/core/models/todo.ts

@@ -1,5 +1,5 @@
 export default interface Todo {
-  id: string;
+  todoId: string;
   title: string;
   isDone: boolean;
 }

src/core/services/todo.ts

@@ -3,12 +3,12 @@ import Todo from '../models/todo';
 export const listTodos = (): Todo[] => {
   return [
     {
-      id: '1',
+      todoId: '1',
       title: 'test',
       isDone: false
     },
     {
-      id: '2',
+      todoId: '2',
       title: 'second',
       isDone: true
     }

src/index.tsx

@@ -6,33 +6,21 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { ThemeProvider } from 'styled-components';
 import { myTheme } from './core/theme';
-import { ApolloClient, gql, InMemoryCache } from '@apollo/client';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 
 const client = new ApolloClient({
   uri: 'http://127.0.0.1:8000/',
   cache: new InMemoryCache()
 });
 
-client
-  .query({
-    query: gql`
-      query ListAll {
-        listTodos {
-          todoId
-          title
-          isDone
-        }
-      }
-    `
-  })
-  .then((res) => console.log(res));
-
 ReactDOM.render(
   <React.StrictMode>
     <ThemeProvider theme={myTheme}>
-      <BrowserRouter>
+      <ApolloProvider client={client}>
-        <App />
+        <BrowserRouter>
-      </BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ApolloProvider>
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')