React-Query: how can I update cache pagination

Viewed 42

I'm using Paginated for showing data and the user can remove the item. user after a click on the button remove send request delete and get response success. I want to remove the item in catch react-query. I don't want to use method refetch

get all items on the server :

const useGetAll = () => 
    useQuery(['applications/getAll', page], () => axios.get<GetAllApplication>('localhost:...', { params: { page } }), {
        keepPreviousData: true,
    })

interface response data

interface GetAllApplication {
    hasError: boolean
    data: {
        meta: {
            itemsPerPage: number
            totalItems: number
            currentPage: number
            totalPages: number
            sortBy: [['id', 'DESC']]
        }
        response: {
            id: number
            name: string
            status: 'enable' | 'disable'
        }[]
    }
}

remove item request with useMutation :

const useRemoveApplication = () =>
    useMutation('applications/remove', removeApplication, {
        onSuccess({ message },id ) {
            toast(message, { type: 'success' })
    },
})
1 Answers

You should use queryClient's method setQueryData in your onSuccess.

Reference: react-query docs

Related