Next14 + react-query + server actions: Deleting item from a table but the table should self-adjust

here's my deleteCategoryMutation

    const deleteCategoryMutation = useMutation<void, unknown, number>({
        mutationFn: (id) => deleteCategory(id),
        onSuccess: async () => {
            await queryClient.invalidateQueries({
                queryKey: ['categories'],
                refetchType: 'active'
            });
        },
        onError: (error) => {
            console.log(error);
        }
    });

    const deleteCategoryMutation = useMutation<void, unknown, number>({
        mutationFn: (id) => deleteCategory(id),
        onSuccess: async () => {
            await queryClient.invalidateQueries({
                queryKey: ['categories'],
                refetchType: 'active'
            });
        },
        onError: (error) => {
            console.log(error);
        }
    });

Let's say we have 12 items max on a table and I delete 1 The table should: 1. Not display the deleted item 2. Get the next item from the next page and put it on the last slot The reason I invalidate the query is because no data is returned from deleteCategory and the updated list comes from categories however after invalidating it doesn't refresh the UI Here's how it's setup

'use server';

import React from 'react';
import MainCategoriesModule from '../modules/main-categories/main-categories-module';
import { getCategories } from '@/actions/categories';
import { getParentCategories } from '@/actions/categories';

const MainCategories = async () => {
    const categories = await getCategories();
    const parentCategories = await getParentCategories();
    return (
        <div className="mt-10 px-8 pb-10 flex flex-col gap-6">
            <MainCategoriesModule categories={categories} parentCategories={parentCategories} />
        </div>
    );
};

export default MainCategories;

'use server';

import React from 'react';
import MainCategoriesModule from '../modules/main-categories/main-categories-module';
import { getCategories } from '@/actions/categories';
import { getParentCategories } from '@/actions/categories';

const MainCategories = async () => {
    const categories = await getCategories();
    const parentCategories = await getParentCategories();
    return (
        <div className="mt-10 px-8 pb-10 flex flex-col gap-6">
            <MainCategoriesModule categories={categories} parentCategories={parentCategories} />
        </div>
    );
};

export default MainCategories;

here's MainCategoriesModule Am I missing something or should I just use setQueryData and fetch the next page and then stitch it? It seems like a waste since the categories query already has the fresh data just need to reload the UI. window.reload() feels bad to use. also the backend does the work to fix the pagination which is why I said setQueryData seems like a waste

message.txt

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Next14 + react-query + server actions: Deleting item from a table but the table should self-adjust