feat(fetch): added support for urlEncodeParameters (#2292)

* feat(fetch): added support for urlEncodeParameters

* feat(fetch): refactored urlEncodeParameters implementation

* feat(fetch): improved variable naming

Author: chcederquist

docs/src/pages/reference/configuration/output.md

@@ -2891,7 +2891,7 @@ module.exports = {
 
 Type: `Boolean`
 
-Valid values: true or false. Defaults to false. **Note:** this only works for Tanstack Query clients for now.
+Valid values: true or false. Defaults to false. **Note:** this only works for Tanstack Query clients and fetch httpClients for now.
 
 Use this property to enable URL encoding of path/query parameters. This is highly recommended, and will probably become a default in the future, see https://github.com/orval-labs/orval/pull/895
 

packages/fetch/src/index.ts

@@ -1,3 +1,4 @@
+import { TEMPLATE_TAG_REGEX } from '@orval/core';
 import { ClientHeaderBuilder, pascal } from '@orval/core';
 import {
   camel,
@@ -38,6 +39,10 @@ export const generateRequestFunction = (
   }: GeneratorVerbOptions,
   { route, context, pathRoute }: GeneratorOptions,
 ) => {
+  const implementationRoute = context.output.urlEncodeParameters
+    ? makeRouteSafe(route)
+    : route;
+
   const isRequestOptions = override?.requestOptions !== false;
   const isFormData = override?.formData.disabled === false;
   const isFormUrlEncoded = override?.formUrlEncoded !== false;
@@ -114,13 +119,19 @@ ${
   });`
     : ''
 }
-
+  ${
+    context.output.urlEncodeParameters
+      ? `for (const [key, value] of normalizedParams) {
+    normalizedParams.set(key, encodeURIComponent(value));
+  }`
+      : ``
+  }
   ${queryParams ? `const stringifiedParams = normalizedParams.toString();` : ``}
 
   ${
     queryParams
-      ? `return stringifiedParams.length > 0 ? \`${route}${'?${stringifiedParams}'}\` : \`${route}\``
-      : `return \`${route}\``
+      ? `return stringifiedParams.length > 0 ? \`${implementationRoute}${'?${stringifiedParams}'}\` : \`${implementationRoute}\``
+      : `return \`${implementationRoute}\``
   }
 }\n`;
 
@@ -306,10 +317,7 @@ export const generateClient: ClientBuilder = (verbOptions, options) => {
   const imports = generateVerbImports(verbOptions);
   const functionImplementation = generateRequestFunction(verbOptions, options);
 
-  return {
-    implementation: `${functionImplementation}\n`,
-    imports,
-  };
+  return { implementation: `${functionImplementation}\n`, imports };
 };
 
 const getHTTPStatusCodes = () => `
@@ -330,6 +338,9 @@ export const generateFetchHeader: ClientHeaderBuilder = ({
     : '';
 };
 
+export const makeRouteSafe = (route: string): string =>
+  route.replaceAll(TEMPLATE_TAG_REGEX, `\${encodeURIComponent(String($1))}`);
+
 const fetchClientBuilder: ClientGeneratorsBuilder = {
   client: generateClient,
   header: generateFetchHeader,

tests/configs/fetch.config.ts

@@ -248,6 +248,7 @@ export default defineConfig({
       target: '../generated/fetch/dateParams/endpoints.ts',
       schemas: '../generated/fetch/dateParams/model',
       client: 'fetch',
+      urlEncodeParameters: true,
       mode: 'tags-split',
       override: {
         useDates: true,