apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

chore(gui): updates for react-query v4

This commit is contained in:
Sean Sube 2023-04-11 19:21:50 -05:00
parent f53518ad24
commit fcc04982b1
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
12 changed files with 23 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gui/src/components/card/ErrorCard.tsx
View File

@ -5,7 +5,7 @@ import { Stack } from '@mui/system';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation } from 'react-query'; import { useMutation } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { ImageResponse, ReadyResponse, RetryParams } from '../../client/api.js'; import { ImageResponse, ReadyResponse, RetryParams } from '../../client/api.js';

4
gui/src/components/card/LoadingCard.tsx
View File

@ -4,7 +4,7 @@ import { Stack } from '@mui/system';
import * as React from 'react'; import * as React from 'react';
import { useContext, useEffect } from 'react'; import { useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation, useQuery } from 'react-query'; import { useMutation, useQuery } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { ImageResponse } from '../../client/api.js'; import { ImageResponse } from '../../client/api.js';
@ -34,7 +34,7 @@ export function LoadingCard(props: LoadingCardProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const cancel = useMutation(() => client.cancel(image.outputs[index].key)); 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 // data will always be ready without this, even if the API says its not
cacheTime: 0, cacheTime: 0,
refetchInterval: POLL_TIME, refetchInterval: POLL_TIME,

4
gui/src/components/control/ImageControl.tsx
View File

@ -4,7 +4,7 @@ import { Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query'; import { useQuery } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { BaseImgParams } from '../../client/api.js'; import { BaseImgParams } from '../../client/api.js';
@ -30,7 +30,7 @@ export function ImageControl(props: ImageControlProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const schedulers = useQuery('schedulers', async () => client.schedulers(), { const schedulers = useQuery(['schedulers'], async () => client.schedulers(), {
staleTime: STALE_TIME, staleTime: STALE_TIME,
}); });

6
gui/src/components/control/ModelControl.tsx
View File

@ -3,7 +3,7 @@ import { Checkbox, FormControlLabel, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query'; import { useQuery } from '@tanstack/react-query';
import { useHash } from 'react-use/lib/useHash'; import { useHash } from 'react-use/lib/useHash';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
@ -21,10 +21,10 @@ export function ModelControl() {
const setModel = useStore(state, (s) => s.setModel); const setModel = useStore(state, (s) => s.setModel);
const { t } = useTranslation(); const { t } = useTranslation();
const models = useQuery('models', async () => client.models(), { const models = useQuery(['models'], async () => client.models(), {
staleTime: STALE_TIME, staleTime: STALE_TIME,
}); });
const platforms = useQuery('platforms', async () => client.platforms(), { const platforms = useQuery(['platforms'], async () => client.platforms(), {
staleTime: STALE_TIME, staleTime: STALE_TIME,
}); });

6
gui/src/components/input/QueryList.tsx
View File

@ -3,7 +3,7 @@ import { Alert, FormControl, FormLabel, InputLabel, LinearProgress, MenuItem, Se
import * as React from 'react'; import * as React from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { UseQueryResult } from 'react-query'; import { UseQueryResult } from '@tanstack/react-query';
export interface QueryListComplete { export interface QueryListComplete {
result: UseQueryResult<Array<string>>; result: UseQueryResult<Array<string>>;
@ -93,10 +93,6 @@ export function QueryList<T>(props: QueryListProps<T>) {
</FormControl>; </FormControl>;
} }
if (result.status === 'idle') {
return <Typography>{t('input.list.idle')}</Typography>;
}
// else: success // else: success
const data = filterQuery(query, showEmpty); const data = filterQuery(query, showEmpty);

6
gui/src/components/input/QueryMenu.tsx
View File

@ -3,7 +3,7 @@ import { KeyboardArrowDown } from '@mui/icons-material';
import { Alert, Box, Button, FormControl, FormLabel, LinearProgress, Menu, MenuItem, Typography } from '@mui/material'; import { Alert, Box, Button, FormControl, FormLabel, LinearProgress, Menu, MenuItem, Typography } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { UseQueryResult } from 'react-query'; import { UseQueryResult } from '@tanstack/react-query';
export interface QueryMenuComplete { export interface QueryMenuComplete {
result: UseQueryResult<Array<string>>; result: UseQueryResult<Array<string>>;
@ -91,10 +91,6 @@ export function QueryMenu<T>(props: QueryMenuProps<T>) {
</FormControl>; </FormControl>;
} }
if (result.status === 'idle') {
return <Typography>{t('input.list.idle')}</Typography>;
}
// else: success // else: success
const data = filterQuery(query, showEmpty); const data = filterQuery(query, showEmpty);

4
gui/src/components/tab/Blend.tsx
View File

@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { IMAGE_FILTER } from '../../config.js'; import { IMAGE_FILTER } from '../../config.js';
@ -28,7 +28,7 @@ export function Blend() {
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const query = useQueryClient(); const query = useQueryClient();
const upload = useMutation(uploadSource, { const upload = useMutation(uploadSource, {
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), onSuccess: () => query.invalidateQueries(['ready']),
}); });
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));

4
gui/src/components/tab/Img2Img.tsx
View File

@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { IMAGE_FILTER } from '../../config.js'; import { IMAGE_FILTER } from '../../config.js';
@ -29,7 +29,7 @@ export function Img2Img() {
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const query = useQueryClient(); const query = useQueryClient();
const upload = useMutation(uploadSource, { const upload = useMutation(uploadSource, {
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), onSuccess: () => query.invalidateQueries(['ready']),
}); });
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));

8
gui/src/components/tab/Inpaint.tsx
View File

@ -3,7 +3,7 @@ import { Alert, Box, Button, FormControl, FormControlLabel, InputLabel, MenuItem
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; 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 { useStore } from 'zustand';
import { IMAGE_FILTER, STALE_TIME } from '../../config.js'; import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
@ -20,10 +20,10 @@ export function Inpaint() {
const { params } = mustExist(useContext(ConfigContext)); const { params } = mustExist(useContext(ConfigContext));
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const masks = useQuery('masks', async () => client.masks(), { const masks = useQuery(['masks'], async () => client.masks(), {
staleTime: STALE_TIME, staleTime: STALE_TIME,
}); });
const noises = useQuery('noises', async () => client.noises(), { const noises = useQuery(['noises'], async () => client.noises(), {
staleTime: STALE_TIME, staleTime: STALE_TIME,
}); });
@ -77,7 +77,7 @@ export function Inpaint() {
const query = useQueryClient(); const query = useQueryClient();
const upload = useMutation(uploadSource, { const upload = useMutation(uploadSource, {
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), onSuccess: () => query.invalidateQueries([ 'ready' ]),
}); });
function renderBanner() { function renderBanner() {

4
gui/src/components/tab/Txt2Img.tsx
View File

@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { ClientContext, ConfigContext, StateContext } from '../../state.js'; import { ClientContext, ConfigContext, StateContext } from '../../state.js';
@ -25,7 +25,7 @@ export function Txt2Img() {
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const query = useQueryClient(); const query = useQueryClient();
const generate = useMutation(generateImage, { const generate = useMutation(generateImage, {
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), onSuccess: () => query.invalidateQueries([ 'ready' ]),
}); });
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));

4
gui/src/components/tab/Upscale.tsx
View File

@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { IMAGE_FILTER } from '../../config.js'; import { IMAGE_FILTER } from '../../config.js';
@ -26,7 +26,7 @@ export function Upscale() {
const client = mustExist(useContext(ClientContext)); const client = mustExist(useContext(ClientContext));
const query = useQueryClient(); const query = useQueryClient();
const upload = useMutation(uploadSource, { const upload = useMutation(uploadSource, {
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }), onSuccess: () => query.invalidateQueries([ 'ready' ]),
}); });
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));

2
gui/src/main.tsx
View File

@ -5,7 +5,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
import * as React from 'react'; import * as React from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { I18nextProvider, initReactI18next } from 'react-i18next'; import { I18nextProvider, initReactI18next } from 'react-i18next';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { satisfies } from 'semver'; import { satisfies } from 'semver';
import { createStore } from 'zustand'; import { createStore } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware'; import { createJSONStorage, persist } from 'zustand/middleware';