Fix ValidationError when loading many collections at once (#39286)

app/javascript/mastodon/reducers/slices/collections.ts

@@ -27,6 +27,7 @@ import {
   createAppSelector,
   createDataLoadingThunk,
 } from '@/mastodon/store/typed_functions';
+import { batchArray } from '@/mastodon/utils/batch_array';
 import { inputToHashtag } from '@/mastodon/utils/hashtags';
 
 type QueryStatus = 'idle' | 'loading' | 'error';
@@ -337,10 +338,14 @@ async function importAccountsForPreviewCard(
     )
     .filter((id): id is string => !!id);
 
-  await dispatch(
+  // fetchAccounts can only process up to 40 item ids, so we'll
-    fetchAccounts({
+  // batch the list of ids
-      accountIds: previewAccountIds,
+  const batchedAccountIdLists = batchArray(previewAccountIds, 40);
-    }),
+
+  await Promise.allSettled(
+    batchedAccountIdLists.map((accountIds) =>
+      dispatch(fetchAccounts({ accountIds })),
+    ),
   );
 }
 

app/javascript/mastodon/utils/batch_array.ts

@@ -0,0 +1,15 @@
+/**
+ * Splits a long array so that the resulting nested arrays
+ * never exceed the `maxLength` provided.
+ * Useful when dealing with endpoints that accept a limited number
+ * of parameters
+ */
+export function batchArray<T>(array: T[], maxLength: number) {
+  const result: T[][] = [];
+
+  for (let i = 0; i < array.length; i += maxLength) {
+    result.push(array.slice(i, i + maxLength));
+  }
+
+  return result;
+}