Fetch data on server component and update cache on client component next js 14

Help
,
1

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