From 8dae72604f8417e4afddc634acfddb4a0f8a8197 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Mon, 15 May 2023 11:56:55 +0200 Subject: [PATCH] Update to SWR version 2.x (#296) * Update SWR to version 2.1.5 * Improve generic type names * Use "isLoading" property of "useSWR" response * Correctly load library without selected tab With the latest SWR version the library was empty on the first load. Not sure what exactly is the reason, but due to "isPaused" the request wasn't sent even after "activeTab" wasn't undefined anymore. Instead of using "isPaused", passing "null" as the key will also prevent SWR from doing the request. --- package.json | 2 +- src/components/manga/ChapterList.tsx | 4 ++-- src/screens/Extensions.tsx | 4 ++-- src/screens/Library.tsx | 10 ++++------ src/screens/Manga.tsx | 4 ++-- src/screens/Sources.tsx | 4 ++-- src/screens/settings/LibrarySettings.tsx | 4 ++-- src/util/client.tsx | 14 ++++---------- src/util/readerSettings.ts | 4 ++-- src/util/searchSettings.ts | 4 ++-- yarn.lock | 15 +++++++++++---- 11 files changed, 34 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index f8407026..2836a349 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "^5.0.1", "react-virtuoso": "^1.8.6", - "swr": "^1.3.0", + "swr": "^2.1.5", "use-query-params": "^1.2.3", "web-vitals": "^2.1.0" }, diff --git a/src/components/manga/ChapterList.tsx b/src/components/manga/ChapterList.tsx index 96ae7dea..e5870cf9 100644 --- a/src/components/manga/ChapterList.tsx +++ b/src/components/manga/ChapterList.tsx @@ -87,7 +87,7 @@ const ChapterList: React.FC = ({ mangaId }) => { const { data: chaptersData, mutate, - loading, + isLoading, } = useQuery(`/api/v1/manga/${mangaId}/chapters?onlineFetch=false`); const chapters = useMemo(() => chaptersData ?? [], [chaptersData]); @@ -176,7 +176,7 @@ const ChapterList: React.FC = ({ mangaId }) => { .catch(() => makeToast(t(actionsStrings[action].error, { count: chapterIds.length }) as string, 'error')); }; - if (loading) { + if (isLoading) { return (
('/api/v1/extension/list'); + const { data: allExtensions, mutate, isLoading } = useQuery('/api/v1/extension/list'); const filteredExtensions = useMemo( () => @@ -169,7 +169,7 @@ export default function MangaExtensions() { }; }, []); - if (loading) { + if (isLoading) { return ; } diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx index 9b9775a2..31f3d8b2 100644 --- a/src/screens/Library.tsx +++ b/src/screens/Library.tsx @@ -36,7 +36,7 @@ export default function Library() { const { options } = useLibraryOptionsContext(); const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now()); - const { data: tabsData, error: tabsError, loading } = useQuery('/api/v1/category'); + const { data: tabsData, error: tabsError, isLoading } = useQuery('/api/v1/category'); const tabs = tabsData ?? []; const librarySize = useMemo(() => tabs.map((tab) => tab.size).reduce((prev, curr) => prev + curr, 0), [tabs]); @@ -46,10 +46,8 @@ export default function Library() { const { data: mangaData, error: mangaError, - loading: mangaLoading, - } = useQuery(`/api/v1/category/${activeTab?.id}`, { - isPaused: () => activeTab == null, - }); + isLoading: mangaLoading, + } = useQuery(activeTab ? `/api/v1/category/${activeTab?.id}` : null); const mangas = mangaData ?? []; const { setTitle, setAction } = useContext(NavbarContext); @@ -88,7 +86,7 @@ export default function Library() { ); } - if (loading) { + if (isLoading) { return ; } diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx index 1de3a762..79c89fda 100644 --- a/src/screens/Manga.tsx +++ b/src/screens/Manga.tsx @@ -34,7 +34,7 @@ const Manga: React.FC = () => { const { data: manga, error, - loading, + isLoading, isValidating, mutate, } = useQuery(`/api/v1/manga/${id}/?onlineFetch=false`); @@ -95,7 +95,7 @@ const Manga: React.FC = () => { - {loading && } + {isLoading && } {manga && } diff --git a/src/screens/Sources.tsx b/src/screens/Sources.tsx index 425bfdc6..5ebcb71b 100644 --- a/src/screens/Sources.tsx +++ b/src/screens/Sources.tsx @@ -52,7 +52,7 @@ export default function Sources() { const [shownLangs, setShownLangs] = useLocalStorage('shownSourceLangs', sourceDefualtLangs()); const [showNsfw] = useLocalStorage('showNsfw', true); - const { data: sources, loading } = useQuery('/api/v1/source/list'); + const { data: sources, isLoading } = useQuery('/api/v1/source/list'); const history = useHistory(); @@ -89,7 +89,7 @@ export default function Sources() { ); }, [t, shownLangs, sources]); - if (loading) return ; + if (isLoading) return ; if (sources?.length === 0) { return

{t('source.error.label.no_sources_found')}

; diff --git a/src/screens/settings/LibrarySettings.tsx b/src/screens/settings/LibrarySettings.tsx index 13ba0491..57f44fd7 100644 --- a/src/screens/settings/LibrarySettings.tsx +++ b/src/screens/settings/LibrarySettings.tsx @@ -77,13 +77,13 @@ export default function LibrarySettings() { setAction(null); }, [t]); - const { data: categories, loading, error: requestError, mutate } = useQuery('/api/v1/category/'); + const { data: categories, isLoading, error: requestError, mutate } = useQuery('/api/v1/category/'); const [currentCategories, setCurrentCategories] = useState(categories ?? []); // categories to check if response categories changed const [dialogCategories, setDialogCategories] = useState(categories ?? []); // categories that are shown and updated in the dialog const [isDialogOpen, setIsDialogOpen] = useState(false); - const retrievedCategoriesChanged = !loading && categories?.length && categories !== currentCategories; + const retrievedCategoriesChanged = !isLoading && categories?.length && categories !== currentCategories; if (retrievedCategoriesChanged) { setCurrentCategories(categories); setDialogCategories(categories); diff --git a/src/util/client.tsx b/src/util/client.tsx index bff62681..51a7546f 100644 --- a/src/util/client.tsx +++ b/src/util/client.tsx @@ -46,13 +46,7 @@ export async function fetcher(path: string) { return res.data as T; } -export const useQuery = ( - key: string, - config?: SWRConfiguration, -): SWRResponse & { loading: boolean } => { - const res = useSWR(key, config); - return { - ...res, - loading: res.data == null && res.error == null, - }; -}; +export const useQuery = ( + key: string | null, + config?: SWRConfiguration, +): SWRResponse => useSWR(key, config); diff --git a/src/util/readerSettings.ts b/src/util/readerSettings.ts index c20c72e3..53924c38 100644 --- a/src/util/readerSettings.ts +++ b/src/util/readerSettings.ts @@ -45,10 +45,10 @@ export const useDefaultReaderSettings = (): { settings: IReaderSettings; loading: boolean; } => { - const { data: meta, loading } = useQuery('/api/v1/meta'); + const { data: meta, isLoading } = useQuery('/api/v1/meta'); const settings = getReaderSettingsWithDefaultValueFallback(meta); - return { metadata: meta, settings, loading }; + return { metadata: meta, settings, loading: isLoading }; }; /** diff --git a/src/util/searchSettings.ts b/src/util/searchSettings.ts index d8fd47d4..18f4ee2d 100644 --- a/src/util/searchSettings.ts +++ b/src/util/searchSettings.ts @@ -16,8 +16,8 @@ export const useSearchSettings = (): { settings: ISearchSettings; loading: boolean; } => { - const { data: meta, loading } = useQuery('/api/v1/meta'); + const { data: meta, isLoading } = useQuery('/api/v1/meta'); const settings = getSearchSettingsWithDefaultValueFallback(meta); - return { metadata: meta, settings, loading }; + return { metadata: meta, settings, loading: isLoading }; }; diff --git a/yarn.lock b/yarn.lock index 35482a6d..31d7a322 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10199,10 +10199,12 @@ svgo@^2.7.0: picocolors "^1.0.0" stable "^0.1.8" -swr@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8" - integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw== +swr@^2.1.5: + version "2.1.5" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.1.5.tgz#688effa719c03f6d35c66decbb0f8e79c7190399" + integrity sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw== + dependencies: + use-sync-external-store "^1.2.0" symbol-tree@^3.2.4: version "3.2.4" @@ -10591,6 +10593,11 @@ use-query-params@^1.2.3: dependencies: serialize-query-params "^1.3.5" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"