diff --git a/src/components/Todos/index.tsx b/src/components/Todos/index.tsx index 58ae9cac..56ac9dbf 100644 --- a/src/components/Todos/index.tsx +++ b/src/components/Todos/index.tsx @@ -18,8 +18,12 @@ export const Todos: React.VFC = ({ todos, isLoading, getContent }) => { console.log(isLoading, new Date()) return ( - - + {getContent && ( + <> + + + + )} { {policy} ))} +
  • + + Read Query after network-only + +
  • +
  • + + Read Query after no-cache + +
  • diff --git a/src/container/Todos/read.tsx b/src/container/Todos/read.tsx new file mode 100644 index 00000000..1e2a49fe --- /dev/null +++ b/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 +} diff --git a/src/routes.tsx b/src/routes.tsx index 56d8ca31..153f5f1e 100644 --- a/src/routes.tsx +++ b/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 = () => ( + } + path="/read-query-network-only" + exact + /> + } + path="/read-query-no-cache" + exact + /> } path="/:fetchPolicy" exact />