diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
index 6848b047c6..22237fb8e8 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { fetchPatron } from "../../fetch/erm.js"
+import { APIClient } from "../../fetch/api-client.js"
 
 export default {
     name: "UserRoles",
@@ -110,8 +110,9 @@ export default {
             let selected_patron_id =
                 document.getElementById("selected_patron_id").value
             let patron
+            const client = APIClient.patron
             // FIXME We are missing a "loading..."
-            fetchPatron(selected_patron_id).then(p => {
+            client.patrons.get(selected_patron_id).then(p => {
                 patron = p
                 this.user_roles[c].patron = patron
                 this.user_roles[c].patron_str = $patron_to_html(patron)
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js
index 61b2dcb606..0b11b7f6d0 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js
@@ -1,5 +1,7 @@
 import ERMAPIClient from "./erm-api-client";
+import PatronAPIClient from "./patron-api-client";
 
 export const APIClient = {
     erm: new ERMAPIClient(),
+    patron: new PatronAPIClient(),
 };
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
index 1526853330..9d8a245933 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
@@ -2,12 +2,6 @@ import { setError } from "../messages";
 
 //TODO: all of these functions should be deleted and reimplemented in the components using ERMAPIClient
 
-export const fetchPatron = function (patron_id) {
-    if (!patron_id) return;
-    const apiUrl = "/api/v1/patrons/" + patron_id;
-    return myFetch(apiUrl);
-};
-
 export const fetchVendors = function () {
     const apiUrl = "/api/v1/acquisitions/vendors?_per_page=-1";
     return myFetch(apiUrl);
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/patron-api-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/patron-api-client.js
new file mode 100644
index 0000000000..2e57e1ea49
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/patron-api-client.js
@@ -0,0 +1,20 @@
+import HttpClient from "./http-client";
+
+export class PatronAPIClient extends HttpClient {
+    constructor() {
+        super({
+            baseURL: "/api/v1/",
+        });
+    }
+
+    get patrons() {
+        return {
+            get: (id) =>
+                this.get({
+                    endpoint: "patrons/" + id,
+                }),
+        };
+    }
+}
+
+export default PatronAPIClient;