Create queryKey factory

frontend/src/PagesAdmin/InformationAdminPage/InformationAdminPage.tsx

@@ -7,6 +7,7 @@ import { deleteInformationPage, getInformationPages } from '~/api';
 import { useCustomNavigate, useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
+import { infoPageKeys } from '~/queryKeys';
 import { ROUTES } from '~/routes';
 import { dbT, lowerCapitalize } from '~/utils';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
@@ -18,7 +19,7 @@ export function InformationAdminPage() {
 
   // TODO: add permissions on render
   const { data, isLoading } = useQuery({
-    queryKey: ['informationpages'],
+    queryKey: infoPageKeys.all,
     queryFn: getInformationPages,
   });
 

frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx

@@ -22,6 +22,7 @@ import { MultiSelect } from '~/Components/MultiSelect';
 import { createRole, editRole, getPermissions } from '~/api';
 import type { RoleDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
+import { permissionKeys } from '~/queryKeys';
 import { ROLE_CONTENT_TYPE, ROLE_NAME } from '~/schema/role';
 import styles from './RoleForm.module.scss';
 
@@ -47,7 +48,7 @@ export function RoleForm({ role }: Props) {
     isLoading,
     isError,
   } = useQuery({
-    queryKey: ['permissions'],
+    queryKey: permissionKeys.all,
     queryFn: getPermissions,
   });
 

frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx

@@ -9,6 +9,7 @@ import { getRoles } from '~/api';
 import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
+import { roleKeys } from '~/queryKeys';
 import { ROUTES } from '~/routes';
 import { lowerCapitalize } from '~/utils';
 
@@ -19,7 +20,7 @@ export function RolesAdminPage() {
   useTitle(title);
 
   const { data: roles, isLoading } = useQuery({
-    queryKey: ['roles'],
+    queryKey: roleKeys.all,
     queryFn: getRoles,
   });
 

frontend/src/queryKeys.ts

@@ -0,0 +1,23 @@
+export const roleKeys = {
+  all: ['roles'] as const,
+  lists: () => [...roleKeys.all, 'list'] as const,
+  list: (filters: unknown[]) => [...roleKeys.lists(), { filters }] as const,
+  details: () => [...roleKeys.all, 'detail'] as const,
+  detail: (id: number) => [...roleKeys.details(), id] as const,
+};
+
+export const infoPageKeys = {
+  all: ['infopages'] as const,
+  lists: () => [...infoPageKeys.all, 'list'] as const,
+  list: (filters: unknown[]) => [...infoPageKeys.lists(), { filters }] as const,
+  details: () => [...infoPageKeys.all, 'detail'] as const,
+  detail: (slug: string) => [...infoPageKeys.details(), slug] as const,
+};
+
+export const permissionKeys = {
+  all: ['permissions'] as const,
+  lists: () => [...permissionKeys.all, 'list'] as const,
+  list: (filters: unknown[]) => [...permissionKeys.lists(), { filters }] as const,
+  details: () => [...permissionKeys.all, 'detail'] as const,
+  detail: (id: number) => [...permissionKeys.details(), id] as const,
+};