Implemented key serializer for swr

packages/app/src/stores/middlewares/serialize.ts

@@ -0,0 +1,13 @@
+import { Middleware, SWRHook } from 'swr';
+
+export const serializeKey: Middleware = (useSWRNext: SWRHook) => {
+  return (key, fetcher, config) => {
+    const serializedKey = Array.isArray(key) ? JSON.stringify(key) : key;
+
+    if (fetcher == null) {
+      return useSWRNext(serializedKey, config);
+    }
+
+    return useSWRNext(serializedKey, key => fetcher(...JSON.parse(key)), config);
+  };
+};

packages/app/src/stores/user-group.tsx

@@ -4,6 +4,7 @@ import useSWRImmutable from 'swr/immutable';
 import { apiv3Get } from '~/client/util/apiv3-client';
 import { IUserGroupHasId, IUserGroupRelationHasId } from '~/interfaces/user';
 import { UserGroupListResult, ChildUserGroupListResult, UserGroupRelationListResult } from '~/interfaces/user-group-response';
+import { serializeKey } from './middlewares/serialize';
 
 
 export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[]): SWRResponse<UserGroupListResult, Error> => {
@@ -18,20 +19,22 @@ export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[]): SWRRespon
 
 export const useSWRxChildUserGroupList = (parentIds?: string[], initialData?: IUserGroupHasId[]): SWRResponse<ChildUserGroupListResult, Error> => {
   return useSWRImmutable(
-    parentIds != null ? JSON.stringify(['/user-groups/children', parentIds]) : null,
+    parentIds != null ? ['/user-groups/children', parentIds] : null,
     (endpoint, parentIds) => apiv3Get(endpoint, { parentIds }).then(result => result.data),
     {
       fallbackData: initialData,
+      use: [serializeKey],
     },
   );
 };
 
 export const useSWRxUserGroupRelationList = (groupIds?: string[], initialData?: IUserGroupRelationHasId[]): SWRResponse<UserGroupRelationListResult, Error> => {
   return useSWRImmutable(
-    groupIds != null ? JSON.stringify(['/user-group-relations', groupIds]) : null,
+    groupIds != null ? ['/user-group-relations', groupIds] : null,
     (endpoint, parentIds) => apiv3Get(endpoint, { parentIds }).then(result => result.data),
     {
       fallbackData: initialData,
+      use: [serializeKey],
     },
   );
 };