Optimized count query on object list page (#5884)

Author: bilalabbad

frontend/app/src/entities/nodes/api/getObjectItems.ts

@@ -1,6 +1,5 @@
 import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
-import { useObjectItems } from "@/entities/nodes/hooks/useObjectItems";
-import { getPermission } from "@/entities/permission/utils";
+import { useObjectsCount } from "@/entities/nodes/object/domain/get-objects-count.query";
 import { ModelSchema } from "@/entities/schema/types";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { queryClient } from "@/shared/api/rest/client";
@@ -25,24 +24,26 @@ const ObjectHeader = ({ schema, objectId }: ObjectHeaderProps) => {
 
 const ObjectItemsHeader = ({ schema }: ObjectHeaderProps) => {
   const [filters] = useFilters();
-  const { data, loading, error } = useObjectItems(schema, filters);
-  const kindFilter = filters?.find((filter) => filter.name === "kind__value");
+  const {
+    data: count,
+    isPending,
+    isRefetching,
+    isError,
+  } = useObjectsCount({ schemaKind: schema.kind as string, filters });
 
-  const schemaKind = kindFilter?.value || (schema.kind as string);
-  const { count, permissions } = data?.[schemaKind] ?? { count: undefined, permissions: undefined };
-  const currentPermission = getPermission(permissions?.edges);
-
-  if (!currentPermission.view.isAllowed) {
-    return null;
-  }
+  const refetchObjects = () => {
+    queryClient.invalidateQueries({
+      predicate: (query) => query.queryKey.includes("objects"),
+    });
+  };
 
   return (
     <Content.CardTitle
       title={schema.label || schema.name}
-      badgeContent={loading && !error ? "..." : count}
+      badgeContent={isPending && !isError ? "..." : count}
       description={schema.description}
-      isReloadLoading={loading}
-      reload={() => graphqlClient.refetchQueries({ include: [schema.kind!] })}
+      isReloadLoading={isRefetching}
+      reload={refetchObjects}
       data-testid="object-header"
       end={
         <ObjectHelpButton

frontend/app/src/entities/nodes/hooks/useObjectItems.ts

@@ -0,0 +1,33 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { ContextParams } from "@/shared/api/types";
+import { gql } from "@apollo/client";
+import { jsonToGraphQLQuery } from "json-to-graphql-query";
+
+const getObjectsCountQuery = (kind: string) => {
+  const query = {
+    query: {
+      __name: `GetObjectsCount${kind}`,
+      [kind]: {
+        count: true,
+      },
+    },
+  };
+
+  return gql(jsonToGraphQLQuery(query));
+};
+
+export type GetObjectsCountFromApiParams = ContextParams & { schemaKind: string };
+
+export const getObjectsCountFromApi = async ({
+  schemaKind,
+  branchName,
+  atDate,
+}: GetObjectsCountFromApiParams) => {
+  return graphqlClient.query({
+    query: getObjectsCountQuery(schemaKind),
+    context: {
+      branch: branchName,
+      date: atDate,
+    },
+  });
+};

frontend/app/src/entities/nodes/object-header.tsx

@@ -0,0 +1,37 @@
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
+import { datetimeAtom } from "@/shared/stores/time.atom";
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { GetObjectsCountParams, getObjectsCount } from "./get-objects-count";
+
+export function getObjectsCountQueryOptions({
+  schemaKind,
+  filters,
+  branchName,
+  atDate,
+}: GetObjectsCountParams) {
+  return queryOptions({
+    queryKey: [branchName, atDate, "objects", schemaKind, "count", JSON.stringify(filters)],
+    queryFn: async () => {
+      return getObjectsCount({
+        schemaKind,
+        branchName,
+        atDate,
+        filters,
+      });
+    },
+  });
+}
+
+export function useObjectsCount(params: Omit<GetObjectsCountParams, "branchName" | "atDate">) {
+  const { currentBranch } = useCurrentBranch();
+  const timeMachineDate = useAtomValue(datetimeAtom);
+
+  return useQuery(
+    getObjectsCountQueryOptions({
+      ...params,
+      branchName: currentBranch.name,
+      atDate: timeMachineDate,
+    })
+  );
+}

frontend/app/src/entities/nodes/object/api/get-objects-count-from-api.ts

@@ -0,0 +1,28 @@
+import { getObjectsCountFromApi } from "@/entities/nodes/object/api/get-objects-count-from-api";
+import { ContextParams } from "@/shared/api/types";
+import { Filter } from "@/shared/hooks/useFilters";
+
+export type GetObjectsCountParams = ContextParams & {
+  schemaKind: string;
+  filters?: Array<Filter>;
+};
+
+export type GetObjectsCount = (args: GetObjectsCountParams) => Promise<number>;
+
+export const getObjectsCount: GetObjectsCount = async ({
+  schemaKind,
+  branchName,
+  atDate,
+  filters = [],
+}) => {
+  const kindFilter = filters?.find((filter) => filter.name === "kind__value");
+  const schemaKindToQuery: string = kindFilter?.value ?? schemaKind;
+
+  const { data } = await getObjectsCountFromApi({
+    schemaKind: schemaKindToQuery,
+    branchName,
+    atDate,
+  });
+
+  return data[schemaKindToQuery].count;
+};

frontend/app/src/entities/nodes/object/domain/get-objects-count.query.ts

@@ -6,16 +6,8 @@ test.describe("/resource-manager - Resource Manager", () => {
   test.use({ storageState: ACCOUNT_STATE_PATH.ADMIN });
 
   test("create a new pool", async ({ page }) => {
-    await Promise.all([
-      page.waitForResponse((response) => {
-        const reqData = response.request().postDataJSON();
-        const status = response.status();
-
-        return reqData?.operationName === "CoreResourcePool" && status === 200;
-      }),
-
-      page.goto("/resource-manager"),
-    ]);
+    await page.goto("/resource-manager");
+    await expect(page.getByRole("link", { name: "External prefixes pool" })).toBeVisible();
     await page.getByTestId("create-object-button").click();
 
     await page.getByLabel("Select an object type").click();