Avoid question mark in API calls without query string (#6455)

hypothesis · Jul 22, 2024 · cbf339f · cbf339f
1 parent 59ce336
commit cbf339f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/lms/static/scripts/frontend_apps/utils/api.ts b/lms/static/scripts/frontend_apps/utils/api.ts
@@ -111,11 +111,8 @@ export async function apiCall<Result = unknown>(
     headers['Content-Type'] = 'application/json; charset=UTF-8';
   }
 
-  let query = '';
-  if (params) {
-    const urlParams = recordToSearchParams(params);
-    query = '?' + urlParams.toString();
-  }
+  const queryString = recordToSearchParams(params ?? {}).toString();
+  const query = queryString.length > 0 ? `?${queryString}` : '';
 
   const defaultMethod = data === undefined ? 'GET' : 'POST';
   const result = await fetch(path + query, {
@@ -211,6 +208,7 @@ export function useAPIFetch<T = unknown>(
   // something simpler, as long as it encodes the same information. The auth
   // token is not included in the key, as we assume currently that it does not
   // change the result.
-  const paramStr = params ? '?' + recordToSearchParams(params).toString() : '';
+  const queryString = recordToSearchParams(params ?? {}).toString();
+  const paramStr = queryString.length > 0 ? `?${queryString}` : '';
   return useFetch(path ? `${path}${paramStr}` : null, fetcher);
 }
diff --git a/lms/static/scripts/frontend_apps/utils/test/api-test.js b/lms/static/scripts/frontend_apps/utils/test/api-test.js
@@ -417,11 +417,26 @@ describe('useAPIFetch', () => {
       params: undefined,
       expectedURL: '/api/some/path',
     },
+    {
+      path: '/api/some/path',
+      params: {},
+      expectedURL: '/api/some/path',
+    },
+    {
+      path: '/api/some/path',
+      params: { ignored: [] },
+      expectedURL: '/api/some/path',
+    },
     {
       path: '/api/some/path',
       params: { foo: 'bar', baz: 'meep' },
       expectedURL: '/api/some/path?foo=bar&baz=meep',
     },
+    {
+      path: '/api/some/path',
+      params: { foo: 'bar', array: ['hello', 'world'] },
+      expectedURL: '/api/some/path?foo=bar&array=hello&array=world',
+    },
   ].forEach(({ path, params, expectedURL }) => {
     it('fetches data from API if a path is provided', async () => {
       const result = useAPIFetch(path, params);