From fcc04982b13081dac427f5a06606d90c25c4d612 Mon Sep 17 00:00:00 2001 From: Sean Sube Date: Tue, 11 Apr 2023 19:21:50 -0500 Subject: [PATCH] chore(gui): updates for react-query v4 --- gui/src/components/card/ErrorCard.tsx | 2 +- gui/src/components/card/LoadingCard.tsx | 4 ++-- gui/src/components/control/ImageControl.tsx | 4 ++-- gui/src/components/control/ModelControl.tsx | 6 +++--- gui/src/components/input/QueryList.tsx | 6 +----- gui/src/components/input/QueryMenu.tsx | 6 +----- gui/src/components/tab/Blend.tsx | 4 ++-- gui/src/components/tab/Img2Img.tsx | 4 ++-- gui/src/components/tab/Inpaint.tsx | 8 ++++---- gui/src/components/tab/Txt2Img.tsx | 4 ++-- gui/src/components/tab/Upscale.tsx | 4 ++-- gui/src/main.tsx | 2 +- 12 files changed, 23 insertions(+), 31 deletions(-) diff --git a/gui/src/components/card/ErrorCard.tsx b/gui/src/components/card/ErrorCard.tsx index 12fa1378..7a5a0db8 100644 --- a/gui/src/components/card/ErrorCard.tsx +++ b/gui/src/components/card/ErrorCard.tsx @@ -5,7 +5,7 @@ import { Stack } from '@mui/system'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; +import { useMutation } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { ImageResponse, ReadyResponse, RetryParams } from '../../client/api.js'; diff --git a/gui/src/components/card/LoadingCard.tsx b/gui/src/components/card/LoadingCard.tsx index 73083464..dd6a2c28 100644 --- a/gui/src/components/card/LoadingCard.tsx +++ b/gui/src/components/card/LoadingCard.tsx @@ -4,7 +4,7 @@ import { Stack } from '@mui/system'; import * as React from 'react'; import { useContext, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQuery } from 'react-query'; +import { useMutation, useQuery } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { ImageResponse } from '../../client/api.js'; @@ -34,7 +34,7 @@ export function LoadingCard(props: LoadingCardProps) { const { t } = useTranslation(); const cancel = useMutation(() => client.cancel(image.outputs[index].key)); - const ready = useQuery(`ready-${image.outputs[index].key}`, () => client.ready(image.outputs[index].key), { + const ready = useQuery([`ready-${image.outputs[index].key}`], () => client.ready(image.outputs[index].key), { // data will always be ready without this, even if the API says its not cacheTime: 0, refetchInterval: POLL_TIME, diff --git a/gui/src/components/control/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx index 5072bb11..54c32b41 100644 --- a/gui/src/components/control/ImageControl.tsx +++ b/gui/src/components/control/ImageControl.tsx @@ -4,7 +4,7 @@ import { Button, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; +import { useQuery } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { BaseImgParams } from '../../client/api.js'; @@ -30,7 +30,7 @@ export function ImageControl(props: ImageControlProps) { const { t } = useTranslation(); const client = mustExist(useContext(ClientContext)); - const schedulers = useQuery('schedulers', async () => client.schedulers(), { + const schedulers = useQuery(['schedulers'], async () => client.schedulers(), { staleTime: STALE_TIME, }); diff --git a/gui/src/components/control/ModelControl.tsx b/gui/src/components/control/ModelControl.tsx index 05dd412d..70a4f9d5 100644 --- a/gui/src/components/control/ModelControl.tsx +++ b/gui/src/components/control/ModelControl.tsx @@ -3,7 +3,7 @@ import { Checkbox, FormControlLabel, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; +import { useQuery } from '@tanstack/react-query'; import { useHash } from 'react-use/lib/useHash'; import { useStore } from 'zustand'; @@ -21,10 +21,10 @@ export function ModelControl() { const setModel = useStore(state, (s) => s.setModel); const { t } = useTranslation(); - const models = useQuery('models', async () => client.models(), { + const models = useQuery(['models'], async () => client.models(), { staleTime: STALE_TIME, }); - const platforms = useQuery('platforms', async () => client.platforms(), { + const platforms = useQuery(['platforms'], async () => client.platforms(), { staleTime: STALE_TIME, }); diff --git a/gui/src/components/input/QueryList.tsx b/gui/src/components/input/QueryList.tsx index 704db7ec..cb401b54 100644 --- a/gui/src/components/input/QueryList.tsx +++ b/gui/src/components/input/QueryList.tsx @@ -3,7 +3,7 @@ import { Alert, FormControl, FormLabel, InputLabel, LinearProgress, MenuItem, Se import * as React from 'react'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { UseQueryResult } from 'react-query'; +import { UseQueryResult } from '@tanstack/react-query'; export interface QueryListComplete { result: UseQueryResult>; @@ -93,10 +93,6 @@ export function QueryList(props: QueryListProps) { ; } - if (result.status === 'idle') { - return {t('input.list.idle')}; - } - // else: success const data = filterQuery(query, showEmpty); diff --git a/gui/src/components/input/QueryMenu.tsx b/gui/src/components/input/QueryMenu.tsx index b9bb723d..7b002dd3 100644 --- a/gui/src/components/input/QueryMenu.tsx +++ b/gui/src/components/input/QueryMenu.tsx @@ -3,7 +3,7 @@ import { KeyboardArrowDown } from '@mui/icons-material'; import { Alert, Box, Button, FormControl, FormLabel, LinearProgress, Menu, MenuItem, Typography } from '@mui/material'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { UseQueryResult } from 'react-query'; +import { UseQueryResult } from '@tanstack/react-query'; export interface QueryMenuComplete { result: UseQueryResult>; @@ -91,10 +91,6 @@ export function QueryMenu(props: QueryMenuProps) { ; } - if (result.status === 'idle') { - return {t('input.list.idle')}; - } - // else: success const data = filterQuery(query, showEmpty); diff --git a/gui/src/components/tab/Blend.tsx b/gui/src/components/tab/Blend.tsx index 53c002dd..7d355742 100644 --- a/gui/src/components/tab/Blend.tsx +++ b/gui/src/components/tab/Blend.tsx @@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { IMAGE_FILTER } from '../../config.js'; @@ -28,7 +28,7 @@ export function Blend() { const client = mustExist(useContext(ClientContext)); const query = useQueryClient(); const upload = useMutation(uploadSource, { - onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), + onSuccess: () => query.invalidateQueries(['ready']), }); const state = mustExist(useContext(StateContext)); diff --git a/gui/src/components/tab/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx index 5fccc22f..a0010718 100644 --- a/gui/src/components/tab/Img2Img.tsx +++ b/gui/src/components/tab/Img2Img.tsx @@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { IMAGE_FILTER } from '../../config.js'; @@ -29,7 +29,7 @@ export function Img2Img() { const client = mustExist(useContext(ClientContext)); const query = useQueryClient(); const upload = useMutation(uploadSource, { - onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), + onSuccess: () => query.invalidateQueries(['ready']), }); const state = mustExist(useContext(StateContext)); diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx index 17c35229..e7929f5b 100644 --- a/gui/src/components/tab/Inpaint.tsx +++ b/gui/src/components/tab/Inpaint.tsx @@ -3,7 +3,7 @@ import { Alert, Box, Button, FormControl, FormControlLabel, InputLabel, MenuItem import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { IMAGE_FILTER, STALE_TIME } from '../../config.js'; @@ -20,10 +20,10 @@ export function Inpaint() { const { params } = mustExist(useContext(ConfigContext)); const client = mustExist(useContext(ClientContext)); - const masks = useQuery('masks', async () => client.masks(), { + const masks = useQuery(['masks'], async () => client.masks(), { staleTime: STALE_TIME, }); - const noises = useQuery('noises', async () => client.noises(), { + const noises = useQuery(['noises'], async () => client.noises(), { staleTime: STALE_TIME, }); @@ -77,7 +77,7 @@ export function Inpaint() { const query = useQueryClient(); const upload = useMutation(uploadSource, { - onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), + onSuccess: () => query.invalidateQueries([ 'ready' ]), }); function renderBanner() { diff --git a/gui/src/components/tab/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx index 37aba706..48a04740 100644 --- a/gui/src/components/tab/Txt2Img.tsx +++ b/gui/src/components/tab/Txt2Img.tsx @@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { ClientContext, ConfigContext, StateContext } from '../../state.js'; @@ -25,7 +25,7 @@ export function Txt2Img() { const client = mustExist(useContext(ClientContext)); const query = useQueryClient(); const generate = useMutation(generateImage, { - onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), + onSuccess: () => query.invalidateQueries([ 'ready' ]), }); const state = mustExist(useContext(StateContext)); diff --git a/gui/src/components/tab/Upscale.tsx b/gui/src/components/tab/Upscale.tsx index ede4c32f..be9168d0 100644 --- a/gui/src/components/tab/Upscale.tsx +++ b/gui/src/components/tab/Upscale.tsx @@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; import { IMAGE_FILTER } from '../../config.js'; @@ -26,7 +26,7 @@ export function Upscale() { const client = mustExist(useContext(ClientContext)); const query = useQueryClient(); const upload = useMutation(uploadSource, { - onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), + onSuccess: () => query.invalidateQueries([ 'ready' ]), }); const state = mustExist(useContext(StateContext)); diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 678f479b..ba67ac95 100644 --- a/gui/src/main.tsx +++ b/gui/src/main.tsx @@ -5,7 +5,7 @@ import LanguageDetector from 'i18next-browser-languagedetector'; import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { I18nextProvider, initReactI18next } from 'react-i18next'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { satisfies } from 'semver'; import { createStore } from 'zustand'; import { createJSONStorage, persist } from 'zustand/middleware';