fix: every time in progress query is fetched, we check the results for atleast one complete query and this invalidates the query results for the files data provider on the list query

This commit is contained in:
Juan Di Toro 2024-03-25 09:12:31 +01:00
parent 1cb7afda8f
commit ab425c6f2c
2 changed files with 25 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { useInvalidate, useNotification } from "@refinedev/core";
import { useNotification } from "@refinedev/core";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useCallback, useContext } from "react";
import { PinningProcess } from "~/data/pinning";
@ -8,7 +8,6 @@ export const usePinning = () => {
const queryClient = useQueryClient();
const context = useContext(PinningContext);
const { open } = useNotification();
const invalidate = useInvalidate();
const { status: pinStatus, data: pinData, mutate: pinMutation } = useMutation({
mutationKey: ["pin-mutation"],
@ -25,7 +24,6 @@ export const usePinning = () => {
}
queryClient.invalidateQueries({ queryKey: ["pin-progress", "file"] });
invalidate({ resource: "files", invalidates: ["list"] });
},
});
@ -43,7 +41,6 @@ export const usePinning = () => {
});
}
queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
invalidate({ resource: "files", invalidates: ["list"] });
},
});

View File

@ -1,10 +1,11 @@
import { useInvalidate } from "@refinedev/core";
import {
type QueryClient,
type UseQueryResult,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { createContext, useContext } from "react";
import { createContext, useContext, useEffect } from "react";
import { PinningProcess, type PinningStatus } from "~/data/pinning";
export interface IPinningData {
@ -26,11 +27,10 @@ export interface IPinningContextType {
export const PinningContext = createContext<IPinningContextType>(
{} as IPinningContextType,
);
export const usePinningContext = () => useContext(PinningContext);
const usePinProgressQuery = () =>
useQuery({
export const PinningProvider = ({ children }: React.PropsWithChildren) => {
const invalidate = useInvalidate();
const queryClient = useQueryClient();
const queryResult = useQuery({
queryKey: ["pin-progress"],
refetchInterval: (query) => {
if (!query.state.data || !query.state.data.items.length) {
@ -51,9 +51,24 @@ const usePinProgressQuery = () =>
},
});
export const PinningProvider = ({ children }: React.PropsWithChildren) => {
const queryClient = useQueryClient();
const queryResult = usePinProgressQuery();
useEffect(() => {
if (
queryResult.isSuccess &&
queryResult.fetchStatus === "idle" &&
queryResult.isFetched
) {
const hasCompletedItems = queryResult.data.items.some(item => item.status === 'completed');
if (hasCompletedItems) {
invalidate({ resource: "files", invalidates: ["list"] });
}
}
}, [
queryResult.fetchStatus,
queryResult.isSuccess,
queryResult.isFetched,
invalidate,
queryResult.data,
]);
return (
<PinningContext.Provider value={{ query: queryResult, queryClient }}>