feat: read query container

src/components/Todos/index.tsx

@@ -18,8 +18,12 @@ export const Todos: React.VFC<Props> = ({ todos, isLoading, getContent }) => {
   console.log(isLoading, new Date())
   return (
     <Card title="TODO List" style={{ margin: '5%' }}>
-      <Button onClick={getContent}>データを取る</Button>
-      <Divider />
+      {getContent && (
+        <>
+          <Button onClick={getContent}>データを取る</Button>
+          <Divider />
+        </>
+      )}
       <List
         loading={isLoading}
         dataSource={todos}

src/container/Home/index.tsx

@@ -27,6 +27,16 @@ export const HomeContainer = () => {
               <Typography.Link href={`/${policy}`}>{policy}</Typography.Link>
             </li>
           ))}
+          <li key="read-query-network-only">
+            <Typography.Link href="/read-query-network-only">
+              Read Query after network-only
+            </Typography.Link>
+          </li>
+          <li key="read-query-no-cache">
+            <Typography.Link href="/read-query-no-cache">
+              Read Query after no-cache
+            </Typography.Link>
+          </li>
         </ul>
       </Card>
     </Wrapper>

src/container/Todos/read.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { WatchQueryFetchPolicy } from '@apollo/client'
+
+import { Todos } from 'components/Todos'
+import { useTodosQuery, TodosDocument } from 'graphql/api'
+import { client } from 'apolloClient'
+
+export const TodosReadContainer: React.FC<{
+  fetchPolicy: WatchQueryFetchPolicy
+}> = ({ fetchPolicy }) => {
+  useTodosQuery({ fetchPolicy })
+  const data = client.readQuery({ query: TodosDocument })
+
+  return <Todos todos={data?.todos} />
+}

src/routes.tsx

@@ -4,10 +4,21 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { HomeContainer } from './container/Home'
 
 import { TodosContainer } from 'container/Todos'
+import { TodosReadContainer } from 'container/Todos/read'
 
 export const Routes = () => (
   <BrowserRouter>
     <Switch>
+      <Route
+        component={() => <TodosReadContainer fetchPolicy="network-only" />}
+        path="/read-query-network-only"
+        exact
+      />
+      <Route
+        component={() => <TodosReadContainer fetchPolicy="no-cache" />}
+        path="/read-query-no-cache"
+        exact
+      />
       <Route component={HomeContainer} path="/" exact />
       <Route component={() => <TodosContainer />} path="/:fetchPolicy" exact />
     </Switch>