Big get request (#4993)

* adds middleware to convert post request containing __aposGetWithQuery in get request
* uses new middleware in media manager
* asks for first page when requesting images through IDs

Author: ValJed

CHANGELOG.md

@@ -5,6 +5,8 @@
 ### Adds
 
 * Adds keyboard shortcuts for manipulating widgets in areas. Includes Cut, Copy, Paste, Delete, and Duplicate.
+* Adds a new way to make `GET` requests with a large query string. It can become a `POST` request containing the key `__aposGetWithQuery` in its body.
+A middleware checks for this key and converts the request back to a `GET` request with the right `req.query` property.
 
 ### Changes
 

modules/@apostrophecms/express/index.js

@@ -417,7 +417,27 @@ module.exports = {
       bodyParserJson: bodyParser.json({
         limit: '16mb',
         ...(self.options.bodyParser && self.options.bodyParser.json)
-      })
+      }),
+      // Supports POST that are supposed to be GET requests
+      // when the query string is too big, we convert it back to GET here.
+      convertPostToGetWithQuery(req, res, next) {
+        if (req.method === 'POST' && req.body?.__aposGetWithQuery) {
+          req.method = 'GET';
+          req.query = req.body.__aposGetWithQuery;
+          delete req.body;
+          if (!req.url.includes('?')) {
+            req.url = req.url + '?' + qs.stringify(req.query);
+          } else {
+            const [ url, queryString ] = req.url.split('?');
+            const firstPart = queryString.endsWith('&')
+              ? queryString
+              : (queryString ? `${queryString}&` : '');
+            req.url = `${url}?${firstPart}${qs.stringify(req.query)}`;
+          }
+        }
+
+        return next();
+      }
     };
   },
 

modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -348,11 +348,14 @@ export default {
         page: this.currentPage,
         viewContext: this.relationshipField ? 'relationship' : 'manage'
       };
+
       // Used for batch tagging update
       if (options._ids) {
         qs._ids = options._ids;
         qs.perPage = options._ids.length;
+        qs.page = 1;
       }
+
       const filtered = !!Object.keys(this.filterValues).length;
       if (this.moduleOptions && Array.isArray(this.moduleOptions.filters)) {
         this.moduleOptions.filters.forEach(filter => {
@@ -374,8 +377,10 @@ export default {
           delete qs[prop];
         };
       }
-      const apiResponse = await apos.http.get(this.moduleOptions.action, {
-        qs,
+      const apiResponse = await apos.http.post(this.moduleOptions.action, {
+        body: {
+          __aposGetWithQuery: qs
+        },
         draft: true
       });