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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import toast, { Toaster } from 'react-hot-toast'
|
import toast, { Toaster } from 'react-hot-toast'
|
||||||
import emojiRegex from 'emoji-regex'
|
import emojiRegex from 'emoji-regex'
|
||||||
|
@ -8,13 +7,12 @@ import { ParsedUrlQuery } from 'querystring'
|
||||||
import { FunctionComponent, useState } from 'react'
|
import { FunctionComponent, useState } from 'react'
|
||||||
import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
|
import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
|
||||||
|
|
||||||
import useSWR from 'swr'
|
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import dynamic from 'next/dynamic'
|
import dynamic from 'next/dynamic'
|
||||||
|
|
||||||
import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
|
import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
|
||||||
import { extensions, preview } from '../utils/getPreviewType'
|
import { extensions, preview } from '../utils/getPreviewType'
|
||||||
import { getBaseUrl } from '../utils/tools'
|
import { getBaseUrl, useStaleSWR } from '../utils/tools'
|
||||||
import { VideoPreview } from './previews/VideoPreview'
|
import { VideoPreview } from './previews/VideoPreview'
|
||||||
import { AudioPreview } from './previews/AudioPreview'
|
import { AudioPreview } from './previews/AudioPreview'
|
||||||
import Loading from './Loading'
|
import Loading from './Loading'
|
||||||
|
@ -60,8 +58,6 @@ const queryToPath = (query?: ParsedUrlQuery) => {
|
||||||
return '/'
|
return '/'
|
||||||
}
|
}
|
||||||
|
|
||||||
const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
|
||||||
|
|
||||||
const FileListItem: FunctionComponent<{
|
const FileListItem: FunctionComponent<{
|
||||||
fileContent: { id: string; name: string; size: number; file: Object; lastModifiedDateTime: string }
|
fileContent: { id: string; name: string; size: number; file: Object; lastModifiedDateTime: string }
|
||||||
}> = ({ fileContent: c }) => {
|
}> = ({ fileContent: c }) => {
|
||||||
|
@ -109,7 +105,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
|
|
||||||
const path = queryToPath(query)
|
const path = queryToPath(query)
|
||||||
|
|
||||||
const { data, error } = useSWR(`/api?path=${path}`, fetcher)
|
const { data, error } = useStaleSWR(`/api?path=${path}`)
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,17 +1,15 @@
|
||||||
import { useEffect, FunctionComponent } from 'react'
|
import { useEffect, FunctionComponent } from 'react'
|
||||||
import useSWR from 'swr'
|
|
||||||
import axios from 'axios'
|
|
||||||
import Prism from 'prismjs'
|
import Prism from 'prismjs'
|
||||||
|
|
||||||
import { getExtension } from '../../utils/getFileIcon'
|
import { getExtension } from '../../utils/getFileIcon'
|
||||||
|
import { useStaleSWR } from '../../utils/tools'
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadBtn from '../DownloadBtn'
|
import DownloadBtn from '../DownloadBtn'
|
||||||
|
|
||||||
const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
|
||||||
|
|
||||||
const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||||
const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
|
const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
Prism.highlightAll()
|
Prism.highlightAll()
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
import { useEffect, FunctionComponent } from 'react'
|
import { useEffect, FunctionComponent } from 'react'
|
||||||
import axios from 'axios'
|
|
||||||
import useSWR from 'swr'
|
|
||||||
import Prism from 'prismjs'
|
import Prism from 'prismjs'
|
||||||
import ReactMarkdown from 'react-markdown'
|
import ReactMarkdown from 'react-markdown'
|
||||||
import gfm from 'remark-gfm'
|
import gfm from 'remark-gfm'
|
||||||
|
@ -13,11 +11,10 @@ import 'katex/dist/katex.min.css'
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadBtn from '../DownloadBtn'
|
import DownloadBtn from '../DownloadBtn'
|
||||||
|
import { useStaleSWR } from '../../utils/tools'
|
||||||
const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
|
||||||
|
|
||||||
const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
|
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(() => {
|
useEffect(() => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
import axios from 'axios'
|
|
||||||
import { FunctionComponent } from 'react'
|
import { FunctionComponent } from 'react'
|
||||||
import useSWR from 'swr'
|
|
||||||
|
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadBtn from '../DownloadBtn'
|
import DownloadBtn from '../DownloadBtn'
|
||||||
|
import { useStaleSWR } from '../../utils/tools'
|
||||||
const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
|
||||||
|
|
||||||
const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
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) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div className="shadow bg-white dark:bg-gray-900 rounded p-3">
|
<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 = () => {
|
export const getBaseUrl = () => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
return window.location.origin
|
return window.location.origin
|
||||||
}
|
}
|
||||||
return ''
|
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