chore(gui): updates for react-query v4
This commit is contained in:
parent
f53518ad24
commit
fcc04982b1
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
|
@ -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<Array<string>>;
|
||||
|
@ -93,10 +93,6 @@ export function QueryList<T>(props: QueryListProps<T>) {
|
|||
</FormControl>;
|
||||
}
|
||||
|
||||
if (result.status === 'idle') {
|
||||
return <Typography>{t('input.list.idle')}</Typography>;
|
||||
}
|
||||
|
||||
// else: success
|
||||
const data = filterQuery(query, showEmpty);
|
||||
|
||||
|
|
|
@ -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<Array<string>>;
|
||||
|
@ -91,10 +91,6 @@ export function QueryMenu<T>(props: QueryMenuProps<T>) {
|
|||
</FormControl>;
|
||||
}
|
||||
|
||||
if (result.status === 'idle') {
|
||||
return <Typography>{t('input.list.idle')}</Typography>;
|
||||
}
|
||||
|
||||
// else: success
|
||||
const data = filterQuery(query, showEmpty);
|
||||
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in New Issue