Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update cache with paginated response

Browse Source
This commit is contained in:
Mary Hipp
2023-07-14 13:38:05 -04:00
parent cc88f5cc3f
commit 067d5b22b2
2 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -22,7 +22,10 @@ import { VirtuosoGrid } from 'react-virtuoso';
import { receivedPageOfImages } from 'services/api/thunks/image';
import ImageGridItemContainer from './ImageGridItemContainer';
import ImageGridListContainer from './ImageGridListContainer';
import { useListImagesQuery } from '../../../../services/api/endpoints/images';
import {
imagesApi,
useListImagesQuery,
} from '../../../../services/api/endpoints/images';
import { ImageDTO } from '../../../../services/api/types';
const selector = createSelector(
@ -70,34 +73,51 @@ const GalleryImageGrid = () => {
setLimit(INITIAL_IMAGE_LIMIT);
}, [selectedBoardId]);
const { data: imageListResponse, isLoading: isLoading } = useListImagesQuery({
categories: galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
is_intermediate: false,
offset: 0,
limit: INITIAL_IMAGE_LIMIT,
...(selectedBoardId === 'all' ? {} : { board_id: selectedBoardId }),
});
const BASE_QUERY = useMemo(() => {
return {
categories:
galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
is_intermediate: false,
offset: 0,
limit: INITIAL_IMAGE_LIMIT,
...(selectedBoardId === 'all' ? {} : { board_id: selectedBoardId }),
};
}, [galleryView, selectedBoardId]);
const { data: paginatedData, isLoading: isLoadingPaginated } =
useListImagesQuery(
{
categories:
galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
is_intermediate: false,
offset,
limit,
...(selectedBoardId === 'all' ? {} : { board_id: selectedBoardId }),
},
{ skip: offset === 0 }
);
const { data: imageListResponse, isLoading: isLoading } =
useListImagesQuery(BASE_QUERY);
const { data: paginatedData } = useListImagesQuery(
{
categories:
galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
is_intermediate: false,
offset,
limit,
...(selectedBoardId === 'all' ? {} : { board_id: selectedBoardId }),
},
{ skip: offset === 0 }
);
useEffect(() => {
if (imageListResponse) setImageList(imageListResponse.items);
}, [imageListResponse]);
useEffect(() => {
if (paginatedData) setImageList((i) => [...i, ...paginatedData.items]);
}, [paginatedData]);
if (paginatedData) {
dispatch(
imagesApi.util.updateQueryData(
'listImages',
BASE_QUERY,
(draftPosts) => {
paginatedData.items.forEach((item) => {
draftPosts.items.push(item);
});
}
)
);
}
}, [paginatedData, dispatch, BASE_QUERY]);
const areMoreAvailable = useMemo(() => {
if (imageListResponse?.total) {

11
invokeai/frontend/web/src/services/api/endpoints/images.ts
View File

@ -28,13 +28,22 @@ export const imagesApi = api.injectEndpoints({
if (result) {
// and individual tags for each image
tags.push(
...result.items.map(({ image_name }) => ({
...result.items.map(({ image_name, board_id }) => ({
type: 'Image' as const,
id: image_name,
}))
);
}
if (result && arg.board_id) {
tags.push(
...result.items.map(({ image_name, board_id }) => ({
type: 'BoardImage' as const,
id: `${image_name}_${board_id}`,
}))
);
}
return tags;
},
}),