use stale swr and disable revalidation
This commit is contained in:
parent
b54d59cbba
commit
8a5f4482cd
5 changed files with 34 additions and 21 deletions
|
@ -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 (
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue