Clients - Add default parameter serializer for arrays on axios. (#341)

Co-authored-by: paribaker <58012003+paribaker@users.noreply.github.com>
thinknimble · Aug 26, 2024 · 96b4115 · 96b4115
1 parent fca7c4d
commit 96b4115
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/package.json b/{{cookiecutter.project_slug}}/clients/mobile/react-native/package.json
@@ -59,9 +59,11 @@
     "expo-web-browser": "~13.0.3",
     "jotai": "^2.7.1",
     "nativewind": "^4.0.36",
+    "qs": "^6.13.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
+    "react-native-actions-sheet": "^0.9.6",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.10.1",
@@ -74,8 +76,7 @@
     "rn-navio": "0.0.6",
     "rollbar-react-native": "^0.9.3",
     "zod": "3.21.4",
-    "zustand": "^4.3.3",
-    "react-native-actions-sheet": "^0.9.6"
+    "zustand": "^4.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -85,6 +86,7 @@
     "@tanstack/eslint-plugin-query": "5.35.6",
     "@types/i18n-js": "^3.8.3",
     "@types/lodash": "^4.14.185",
+    "@types/qs": "^6.9.15",
     "@types/react": "~18.2.14",
     "@types/react-dom": "~18.2.25",
     "@typescript-eslint/eslint-plugin": "^5.37.0",

diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/src/services/axios-instance.ts b/{{cookiecutter.project_slug}}/clients/mobile/react-native/src/services/axios-instance.ts
@@ -1,5 +1,6 @@
-import axios, { AxiosError } from 'axios'
 import { useAuth } from '@stores/auth'
+import axios, { AxiosError } from 'axios'
+import qs from 'qs'
 import Config from '../../Config'
 
 const baseUrl =
@@ -8,6 +9,9 @@ const baseUrl =
     : `${Config?.backendServerUrl}`
 export const axiosInstance = axios.create({
   baseURL: `${baseUrl}/api`,
+  paramsSerializer: (params) => {
+    return qs.stringify(params, { arrayFormat: 'comma' })
+  },
 })
 console.log('axiosInstance', `${baseUrl}/api`)
 axiosInstance.interceptors.request.use(

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/package.json b/{{cookiecutter.project_slug}}/clients/web/react/package.json
@@ -21,6 +21,7 @@
     "@thinknimble/tn-forms-react": "^1.0.3",
     "@thinknimble/tn-models": "^3.0.0",
     "axios": "^1.5.0",
+    "qs": "^6.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
@@ -33,6 +34,7 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.4.3",
+    "@types/qs": "^6.9.15",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/services/axios-instance.ts b/{{cookiecutter.project_slug}}/clients/web/react/src/services/axios-instance.ts
@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios'
+import qs from 'qs'
 import { useAuth } from 'src/stores/auth'
 import { getCookie } from 'src/utils/get-cookie'
 
@@ -9,6 +10,9 @@ export const axiosInstance = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
+  paramsSerializer: (params) => {
+    return qs.stringify(params, { arrayFormat: 'comma' })
+  },
 })
 
 axiosInstance.interceptors.request.use(

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/package.json b/{{cookiecutter.project_slug}}/clients/web/vue3/package.json
@@ -27,6 +27,7 @@
     "@tanstack/vue-query": "^5.28.9",
     "@thinknimble/vue3-alert-alert": "^0.0.8",
     "axios": "1.5.0",
+    "qs": "^6.13.0",
     "js-cookie": "3.0.5",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -39,6 +40,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-vue": "^5.0.0",
+    "@types/qs": "^6.9.15",
     "autoprefixer": "^10.4.15",
     "cypress": "^13.5.1",
     "eslint": "^8.49.0",
@@ -54,4 +56,4 @@
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.27"
   }
-}
+}
diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/AxiosClient.js b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/AxiosClient.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useUserStore } from '@/stores/user'
 import CSRF from '@/services/csrf'
+import qs from 'qs'
 
 /**
  *   Get the axios API client.
@@ -27,6 +28,9 @@ class ApiService {
       headers: {
         ...CSRF.getHeaders(),
       },
+      paramsSerializer: (params) => {
+        return qs.stringify(params, { arrayFormat: 'comma' })
+      },
     })
     ApiService.session.interceptors.request.use(
       async (config) => {