Server component
import {
CategoriesDocument,
CategoriesQuery,
CategoryType,
GetCategories,
} from "@/__generated__/graphql";
import AllCategories from "@/components/Categories/all-categories.component";
import Table from "@/components/Table";
import { getClientWithCookies } from "@/lib/client";
import { Routers } from "@/utils/routings";
import { cookies } from "next/headers";
interface IndexPageProps {
params: { slug: string };
searchParams: { [key: string]: string | string[] | undefined };
}
const IndexPage: React.FC<IndexPageProps> = async ({
params,
searchParams,
}) => {
const cookieStore = cookies();
const client = getClientWithCookies(cookieStore.toString());
const { data } = await client.query<CategoriesQuery>({
query: CategoriesDocument,
variables: {
categoryFilter: {
search: searchParams.search ? String(searchParams.search) : "",
page: searchParams.page ? Number(searchParams.page) : 1,
limit: 10,
categoryType: CategoryType.Subcategory,
},
fetchPolicy: "no-cache",
},
});
return (
<>
<AllCategories initialData={data} path={Routers.subcategory} />
</>
);
};
export default IndexPage;
Client component
"use client";
import React, { useState } from "react";
import {
CategoriesQuery,
GetCategories,
useCategoriesQuery,
useRemoveCategoryMutation,
// useRemoveCategoryMutation,
} from "@/__generated__/graphql";
import { useRouter, useSearchParams } from "next/navigation";
import TableCustom, { Post } from "../Table-custom";
import { NotificationPop } from "../Common/Notification";
import { Routers } from "@/utils/routings";
import { getClientWithCookies } from "@/lib/client";
import { cookies } from "next/headers";
interface UserListProps {
initialData?: CategoriesQuery;
path: Routers;
}
const AllCategories: React.FC<UserListProps> = ({ initialData, path }) => {
// Navigation
const searchParams = useSearchParams();
const router = useRouter();
// State
const [notification, setNotification] = useState<boolean>(false);
{
//FIXME - Category update with mutation query
}
// Remove Category
const [
removeCategory,
{
loading: removeCategoryLoading,
error: removeCategoryError,
data: removeCategoryData,
},
] = useRemoveCategoryMutation();
// Search
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
const current = new URLSearchParams(Array.from(searchParams.entries()));
current.set("search", e.target.value);
current.set("page", "1");
const search = current.toString();
const query = search ? `?${search}` : "";
router.push(`${window.location.pathname}${query}`);
};
// Update page
const updatePage = (newPage: number) => {
const current = new URLSearchParams(Array.from(searchParams.entries()));
current.set("page", newPage.toString());
const search = current.toString();
const query = search ? `?${search}` : "";
router.push(`${window.location.pathname}${query}`);
};
// Total Pages
// const totalPages = data?.categories.meta?.totalPages || 1;
// Delete User Function
const handleDelete = async (id: number) => {
try {
await removeCategory({
variables: {
removeCategoryId: id,
},
});
setNotification(true);
} catch (error) {}
};
function mapGetUsersDashBoardQueryToPost(): Post[] {
const users = initialData?.categories.data || [];
const mappedPosts: Post[] = users.map((user) => {
const title = user.title;
return {
img: user.photo ?? null,
link: `${path}/edit/${user.id}`,
title,
editingPath: `${path}/edit/${user.id}`,
delete: () => handleDelete(user.id),
};
});
return mappedPosts;
}
// Notification
const onNotification = () => {
setNotification(false);
};
return (
<>
<NotificationPop
open={notification}
handleClose={onNotification}
severity={removeCategoryError ? "error" : "success"}
>
{removeCategoryError?.message ??
removeCategoryError?.graphQLErrors?.[0]?.message ??
removeCategoryData?.RemoveCategory?.message}
</NotificationPop>
<TableCustom
title={
path === Routers.childcategory
? "Child Categories"
: path === Routers.subcategory
? "Sub Categories"
: "Categories"
}
link={`${path}${Routers.add}`}
search={handleSearch}
post={mapGetUsersDashBoardQueryToPost()}
tableProps={{
title: "Title",
image: "Image",
action: "Action",
edit: "Editing",
page: initialData?.categories.meta?.currentPage || 1,
totalPages: initialData?.categories.meta?.totalPages || 1,
onPrev: () =>
updatePage((initialData?.categories.meta?.currentPage || 1) - 1),
onNext: () =>
updatePage((initialData?.categories.meta?.currentPage || 1) + 1),
}}
showImage
/>
</>
);
};
export default AllCategories;
I fetching data using server component and tried to update the cache on client component. It doesn’t work. Is there any way to update the server data on client component