use stale swr and disable revalidation

components/FileListing.tsx

@@ -1,4 +1,3 @@
-import axios from 'axios'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import emojiRegex from 'emoji-regex'
@@ -8,13 +7,12 @@ import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
 import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
 
-import useSWR from 'swr'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
-import { getBaseUrl } from '../utils/tools'
+import { getBaseUrl, useStaleSWR } from '../utils/tools'
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
 import Loading from './Loading'
@@ -60,8 +58,6 @@ const queryToPath = (query?: ParsedUrlQuery) => {
   return '/'
 }
 
-const fetcher = (url: string) => axios.get(url).then(res => res.data)
-
 const FileListItem: FunctionComponent<{
   fileContent: { id: string; name: string; size: number; file: Object; lastModifiedDateTime: string }
 }> = ({ fileContent: c }) => {
@@ -109,7 +105,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   const path = queryToPath(query)
 
-  const { data, error } = useSWR(`/api?path=${path}`, fetcher)
+  const { data, error } = useStaleSWR(`/api?path=${path}`)
 
   if (error) {
     return (

components/previews/CodePreview.tsx

@@ -1,17 +1,15 @@
 import { useEffect, FunctionComponent } from 'react'
-import useSWR from 'swr'
-import axios from 'axios'
 import Prism from 'prismjs'
 
 import { getExtension } from '../../utils/getFileIcon'
+import { useStaleSWR } from '../../utils/tools'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
 
-const fetcher = (url: string) => axios.get(url).then(res => res.data)
-
 const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
-  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       Prism.highlightAll()

components/previews/MarkdownPreview.tsx

@@ -1,6 +1,4 @@
 import { useEffect, FunctionComponent } from 'react'
-import axios from 'axios'
-import useSWR from 'swr'
 import Prism from 'prismjs'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
@@ -13,11 +11,10 @@ import 'katex/dist/katex.min.css'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
-
-const fetcher = (url: string) => axios.get(url).then(res => res.data)
+import { useStaleSWR } from '../../utils/tools'
 
 const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
-  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

components/previews/TextPreview.tsx

@@ -1,15 +1,12 @@
-import axios from 'axios'
 import { FunctionComponent } from 'react'
-import useSWR from 'swr'
 
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
-
-const fetcher = (url: string) => axios.get(url).then(res => res.data)
+import { useStaleSWR } from '../../utils/tools'
 
 const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
-  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
   if (error) {
     return (
       <div className="shadow bg-white dark:bg-gray-900 rounded p-3">

utils/tools.ts

@@ -1,6 +1,31 @@
+import useSWR, { cache, Key } from 'swr'
+import axios from 'axios'
+
+/**
+ * Extract the current web page's base url
+ * @returns base url of the page
+ */
 export const getBaseUrl = () => {
   if (typeof window !== 'undefined') {
     return window.location.origin
   }
   return ''
 }
+
+// Common axios fetch function
+const fetcher = (url: string) => axios.get(url).then(res => res.data)
+/**
+ * Use stale SWR instead of revalidating on each request. Not ideal for this scenario but have to do
+ * if fetching serverside props from component instead of pages.
+ * @param dataKey request url
+ * @returns useSWR instance
+ */
+export const useStaleSWR = (dataKey: Key) => {
+  const revalidationOptions = {
+    revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  }
+
+  return useSWR(dataKey, fetcher, revalidationOptions)
+}