With react query

src/components/GlobalLoader.js

@@ -1,7 +1,10 @@
 import React from 'react'
+import { useIsFetching } from 'react-query'
 import { Loader } from './styled'
 
 export default function GlobalLoader() {
+  const isFetching = useIsFetching()
+
   return (
     <Loader
       css={`
@@ -12,7 +15,7 @@ export default function GlobalLoader() {
         transition: 0.3s ease;
       `}
       style={{
-        opacity: 1,
+        opacity: isFetching ? 1 : 0,
       }}
     />
   )

src/hooks/useCreatePost.js

@@ -1,20 +1,32 @@
-import React from 'react'
 import axios from 'axios'
+import { useMutation } from 'react-query'
+
+import { queryCache } from '../'
 
 export default function useCreatePost() {
-  const [state, setState] = React.useReducer((_, action) => action, {
-    isIdle: true,
-  })
+  return useMutation(
+    (values) => axios.post('/api/posts', values).then((res) => res.data),
+    {
+      onMutate: (values) => {
+        queryCache.cancelQueries('posts')
 
-  const mutate = React.useCallback(async (values) => {
-    setState({ isLoading: true })
-    try {
-      const data = axios.post('/api/posts', values).then((res) => res.data)
-      setState({ isSuccess: true, data })
-    } catch (error) {
-      setState({ isError: true, error })
-    }
-  }, [])
+        const oldPosts = queryCache.getQueryData('posts')
 
-  return [mutate, state]
+        queryCache.setQueryData('posts', (old) => {
+          return [
+            ...old,
+            {
+              ...values,
+              id: Date.now(),
+              isPreview: true,
+            },
+          ]
+        })
+
+        return () => queryCache.setQueryData('posts', oldPosts)
+      },
+      onError: (error, values, rollback) => rollback(),
+      onSuccess: () => queryCache.invalidateQueries('posts'),
+    }
+  )
 }

src/hooks/useDeletePost.js

@@ -1,20 +1,23 @@
-import React from 'react'
 import axios from 'axios'
+import { useMutation } from 'react-query'
+
+import { queryCache } from '../'
 
 export default function useDeletePost() {
-  const [state, setState] = React.useReducer((_, action) => action, {
-    isIdle: true,
-  })
+  return useMutation(
+    (postId) => axios.delete(`/api/posts/${postId}`).then((res) => res.data),
+    {
+      onError: (error, variables, rollback) => {
+        rollback && rollback()
+      },
+      onSuccess: (data, postId) => {
+        const previousPosts = queryCache.getQueryData('posts')
 
-  const mutate = React.useCallback(async (postId) => {
-    setState({ isLoading: true })
-    try {
-      await axios.delete(`/api/posts/${postId}`).then((res) => res.data)
-      setState({ isSuccess: true })
-    } catch (error) {
-      setState({ isError: true, error })
-    }
-  }, [])
+        const optimisticPosts = previousPosts.filter((d) => d.id !== postId)
 
-  return [mutate, state]
+        queryCache.setQueryData('posts', optimisticPosts)
+        queryCache.invalidateQueries('posts')
+      },
+    }
+  )
 }

src/hooks/usePost.js

@@ -1,30 +1,21 @@
-import React from 'react'
 import axios from 'axios'
+import { useQuery } from 'react-query'
 
-export const fetchPost = (postId) =>
+import { queryCache } from '../'
+
+export const fetchPost = (_, postId) =>
   axios.get(`/api/posts/${postId}`).then((res) => res.data)
 
-export default function usePost(postId) {
-  const [state, setState] = React.useReducer((_, action) => action, {
-    isLoading: true,
+export const prefetchPost = (postId) => {
+  queryCache.prefetchQuery(['posts', String(postId)], fetchPost, {
+    staleTime: 5000,
   })
+}
 
-  const fetch = React.useCallback(async () => {
-    setState({ isLoading: true })
-    try {
-      const data = await fetchPost(postId)
-      setState({ isSuccess: true, data })
-    } catch (error) {
-      setState({ isError: true, error })
-    }
-  }, [postId])
-
-  React.useEffect(() => {
-    fetch()
-  }, [fetch])
-
-  return {
-    ...state,
-    fetch,
-  }
+export default function usePost(postId) {
+  return useQuery(['posts', postId], fetchPost, {
+    placeholderData: () =>
+      queryCache.getQueryData('posts')?.find((d) => d.id == postId),
+    staleTime: 2000,
+  })
 }

src/hooks/usePosts.js

@@ -1,27 +1,16 @@
-import React from 'react'
 import axios from 'axios'
+import { useQuery } from 'react-query'
 
-export default function usePosts() {
-  const [state, setState] = React.useReducer((_, action) => action, {
-    isLoading: true,
-  })
+import { queryCache } from '../'
 
-  const fetch = async () => {
-    setState({ isLoading: true })
-    try {
-      const data = await axios.get('/api/posts').then((res) => res.data)
-      setState({ isSuccess: true, data })
-    } catch (error) {
-      setState({ isError: true, error })
-    }
-  }
+const fetchPosts = () => axios.get('/api/posts').then((res) => res.data)
 
-  React.useEffect(() => {
-    fetch()
-  }, [])
+export const prefetchPost = (postId) => {
+  queryCache.prefetchQuery(['posts', String(postId)], fetchPosts, {
+    staleTime: 5000,
+  })
+}
 
-  return {
-    ...state,
-    fetch,
-  }
+export default function usePosts() {
+  return useQuery('posts', fetchPosts)
 }

src/hooks/useSavePost.js

@@ -1,22 +1,27 @@
-import React from 'react'
 import axios from 'axios'
+import { useMutation } from 'react-query'
+
+import { queryCache } from '../'
 
 export default function useSavePost() {
-  const [state, setState] = React.useReducer((_, action) => action, {
-    isIdle: true,
-  })
+  return useMutation(
+    (values) =>
+      axios.patch(`/api/posts/${values.id}`, values).then((res) => res.data),
+    {
+      onMutate: (values) => {
+        queryCache.cancelQueries('posts')
 
-  const mutate = React.useCallback(async (values) => {
-    setState({ isLoading: true })
-    try {
-      const data = await axios
-        .patch(`/api/posts/${values.id}`, values)
-        .then((res) => res.data)
-      setState({ isSuccess: true, data })
-    } catch (error) {
-      setState({ isError: true, error })
-    }
-  }, [])
+        const oldPost = queryCache.getQueryData(['posts', values.id])
 
-  return [mutate, state]
+        queryCache.setQueryData(['posts', values.id], values)
+
+        return () => queryCache.setQueryData(['posts', values.id], oldPost)
+      },
+      onError: (error, values, rollback) => rollback(),
+      onSuccess: (data, variables) => {
+        queryCache.invalidateQueries('posts')
+        queryCache.invalidateQueries(['posts', variables.id])
+      },
+    }
+  )
 }

src/index.js

@@ -1,15 +1,36 @@
 import React from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { ReactQueryCacheProvider, QueryCache } from 'react-query'
+import { ReactQueryDevtools } from 'react-query-devtools'
+import { hydrate, dehydrate } from 'react-query/hydration'
 //
 
 import { Wrapper, Main } from './components/styled'
 import Sidebar from './components/Sidebar'
+import GlobalLoader from './components/GlobalLoader'
 
 import Admin from './screens/admin'
 import AdminPost from './screens/admin/Post'
 import Blog from './screens/blog'
 import BlogPost from './screens/blog/Post'
 
+export const queryCache = new QueryCache()
+
+function restoreCache() {
+  if (typeof localStorage !== 'undefined') {
+    let cache = localStorage.getItem('queryCache_1')
+    if (cache) {
+      hydrate(queryCache, JSON.parse(cache))
+    }
+
+    queryCache.subscribe((cache) => {
+      localStorage.setItem('queryCache_1', JSON.stringify(dehydrate(cache)))
+    })
+  }
+}
+
+restoreCache()
+
 function SafeHydrate({ children }) {
   return (
     <div suppressHydrationWarning>
@@ -21,27 +42,31 @@ function SafeHydrate({ children }) {
 export default function App() {
   return (
     <SafeHydrate>
-      <BrowserRouter>
-        <Wrapper>
-          <Sidebar />
-          <Main>
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <>
-                    <h1>Welcome!</h1>
-                  </>
-                }
-              />
-              <Route path="/admin" element={<Admin />} />
-              <Route path="/admin/:postId" element={<AdminPost />} />
-              <Route path="/blog" element={<Blog />} />
-              <Route path="/blog/:postId" element={<BlogPost />} />
-            </Routes>
-          </Main>
-        </Wrapper>
-      </BrowserRouter>
+      <ReactQueryCacheProvider queryCache={queryCache}>
+        <BrowserRouter>
+          <Wrapper>
+            <Sidebar />
+            <Main>
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <>
+                      <h1>Welcome!</h1>
+                    </>
+                  }
+                />
+                <Route path="/admin" element={<Admin />} />
+                <Route path="/admin/:postId" element={<AdminPost />} />
+                <Route path="/blog" element={<Blog />} />
+                <Route path="/blog/:postId" element={<BlogPost />} />
+              </Routes>
+            </Main>
+          </Wrapper>
+          <GlobalLoader />
+          <ReactQueryDevtools />
+        </BrowserRouter>
+      </ReactQueryCacheProvider>
     </SafeHydrate>
   )
 }

src/screens/admin/Post.js

@@ -19,8 +19,7 @@ export default function Post() {
   const [deletePost, deletePostInfo] = useDeletePost()
 
   const onSubmit = async (values) => {
-    await savePost(values)
-    postQuery.fetch()
+    savePost(values)
   }
 
   const onDelete = async () => {

src/screens/admin/index.js

@@ -5,17 +5,13 @@ import PostForm from '../../components/PostForm'
 import { Loader } from '../../components/styled'
 
 import usePosts from '../../hooks/usePosts'
+import { prefetchPost } from '../../hooks/usePost'
 import useCreatePost from '../../hooks/useCreatePost'
 
 export default function Posts() {
   const postsQuery = usePosts()
   const [createPost, createPostInfo] = useCreatePost()
 
-  const onSubmit = async (values) => {
-    await createPost(values)
-    postsQuery.fetch()
-  }
-
   return (
     <section>
       <div>
@@ -29,8 +25,18 @@ export default function Posts() {
               <h3>Posts</h3>
               <ul>
                 {postsQuery.data.map((post) => (
-                  <li key={post.id}>
-                    <Link to={`./${post.id}`}>{post.title}</Link>
+                  <li
+                    key={post.id}
+                    style={
+                      post.isPreview && { opacity: 0.3, pointerEvents: 'none' }
+                    }
+                  >
+                    <Link
+                      to={`./${post.id}`}
+                      onMouseEnter={() => prefetchPost(post.id)}
+                    >
+                      {post.title}
+                    </Link>
                   </li>
                 ))}
               </ul>
@@ -44,7 +50,7 @@ export default function Posts() {
         <h3>Create New Post</h3>
         <div>
           <PostForm
-            onSubmit={onSubmit}
+            onSubmit={createPost}
             clearOnSubmit
             submitText={
               createPostInfo.isLoading