feat: add custom axios instance

ui/src/api/auth.test.ts

@@ -1,9 +1,9 @@
-import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 
 import { fetchMe, authURLs } from "./auth";
+import { axiosInstance } from "./axios";
 
-const mock = new MockAdapter(axios);
+const mock = new MockAdapter(axiosInstance);
 
 beforeEach(() => {
   mock.reset();

ui/src/api/auth.ts

@@ -1,8 +1,7 @@
-import axios from "axios";
-
 import type { UserPrincipal } from "types/auth";
 import { ErrorResponse } from "types/api";
 import { AxiosError } from "axios";
+import { axiosInstance } from "./axios";
 
 const BASE = "auth";
 
@@ -13,7 +12,7 @@ export const authURLs = {
 
 export const fetchMe = (): Promise<UserPrincipal | null> => {
   return new Promise((resolve, reject) => {
-    axios
+    axiosInstance
       .get<UserPrincipal>(authURLs.me)
       .then(({ data }) => resolve(data))
       .catch(({ response }: AxiosError<ErrorResponse>) => {

ui/src/api/axios.ts

@@ -0,0 +1,4 @@
+import axios from "axios";
+import { apiBasePath } from "util/basePaths";
+
+export const axiosInstance = axios.create({ baseURL: apiBasePath });

ui/src/api/client.tsx

@@ -1,34 +1,38 @@
 import { Client } from "types/client";
 import { PaginatedResponse, ApiResponse } from "types/api";
 import { handleRequest, PAGE_SIZE } from "util/api";
-import axios from "axios";
+import { axiosInstance } from "./axios";
 
 export const fetchClients = (
   pageToken: string,
 ): Promise<PaginatedResponse<Client[]>> =>
   handleRequest(() =>
-    axios.get<PaginatedResponse<Client[]>>(
+    axiosInstance.get<PaginatedResponse<Client[]>>(
       `/clients?page_token=${pageToken}&size=${PAGE_SIZE}`,
     ),
   );
 
 export const fetchClient = (clientId: string): Promise<ApiResponse<Client>> =>
-  handleRequest(() => axios.get<ApiResponse<Client>>(`/clients/${clientId}`));
+  handleRequest(() =>
+    axiosInstance.get<ApiResponse<Client>>(`/clients/${clientId}`),
+  );
 
 export const createClient = (values: string): Promise<ApiResponse<Client>> =>
-  handleRequest(() => axios.post<ApiResponse<Client>>("/clients", values));
+  handleRequest(() =>
+    axiosInstance.post<ApiResponse<Client>>("/clients", values),
+  );
 
 export const updateClient = (
   clientId: string,
   values: string,
 ): Promise<ApiResponse<Client>> =>
   handleRequest(() =>
-    axios.post<ApiResponse<Client>>(`/clients/${clientId}`, values),
+    axiosInstance.post<ApiResponse<Client>>(`/clients/${clientId}`, values),
   );
 
 export const deleteClient = (client: string) =>
   handleRequest(() =>
-    axios.get<ApiResponse<string>>(`/clients/${client}`, {
+    axiosInstance.get<ApiResponse<string>>(`/clients/${client}`, {
       method: "DELETE",
     }),
   );

ui/src/api/identities.tsx

@@ -1,13 +1,13 @@
 import { ApiResponse, PaginatedResponse } from "types/api";
 import { handleRequest, PAGE_SIZE } from "util/api";
 import { Identity } from "types/identity";
-import axios from "axios";
+import { axiosInstance } from "./axios";
 
 export const fetchIdentities = (
   pageToken: string,
 ): Promise<PaginatedResponse<Identity[]>> =>
   handleRequest(() =>
-    axios.get<PaginatedResponse<Identity[]>>(
+    axiosInstance.get<PaginatedResponse<Identity[]>>(
       `/identities?page_token=${pageToken}&size=${PAGE_SIZE}`,
     ),
   );
@@ -16,19 +16,22 @@ export const fetchIdentity = (
   identityId: string,
 ): Promise<ApiResponse<Identity>> =>
   handleRequest(() =>
-    axios.get<ApiResponse<Identity>>(`/identities/${identityId}`),
+    axiosInstance.get<ApiResponse<Identity>>(`/identities/${identityId}`),
   );
 
 export const createIdentity = (body: string): Promise<unknown> =>
-  handleRequest(() => axios.post("/identities", body));
+  handleRequest(() => axiosInstance.post("/identities", body));
 
 export const updateIdentity = (
   identityId: string,
   values: string,
 ): Promise<ApiResponse<Identity>> =>
   handleRequest(() =>
-    axios.patch<ApiResponse<Identity>>(`/identities/${identityId}`, values),
+    axiosInstance.patch<ApiResponse<Identity>>(
+      `/identities/${identityId}`,
+      values,
+    ),
   );
 
 export const deleteIdentity = (identityId: string): Promise<unknown> =>
-  handleRequest(() => axios.delete(`/identities/${identityId}`));
+  handleRequest(() => axiosInstance.delete(`/identities/${identityId}`));

ui/src/api/provider.tsx

@@ -1,37 +1,40 @@
 import { handleRequest } from "util/api";
 import { IdentityProvider } from "types/provider";
-import axios from "axios";
 import { PaginatedResponse, ApiResponse } from "types/api";
+import { axiosInstance } from "./axios";
 
 export const fetchProviders = (): Promise<
   PaginatedResponse<IdentityProvider[]>
 > =>
   handleRequest(() =>
-    axios.get<PaginatedResponse<IdentityProvider[]>>(`/idps`),
+    axiosInstance.get<PaginatedResponse<IdentityProvider[]>>(`/idps`),
   );
 
 export const fetchProvider = (
   providerId: string,
 ): Promise<IdentityProvider> => {
   return new Promise((resolve, reject) => {
     handleRequest<IdentityProvider[], ApiResponse<IdentityProvider[]>>(() =>
-      axios.get<ApiResponse<IdentityProvider[]>>(`/idps/${providerId}`),
+      axiosInstance.get<ApiResponse<IdentityProvider[]>>(`/idps/${providerId}`),
     )
       .then(({ data }) => resolve(data[0]))
       .catch((error) => reject(error));
   });
 };
 
 export const createProvider = (body: string): Promise<unknown> =>
-  handleRequest(() => axios.post("/idps", body));
+  handleRequest(() => axiosInstance.post("/idps", body));
 
 export const updateProvider = (
   providerId: string,
   values: string,
 ): Promise<ApiResponse<IdentityProvider>> =>
   handleRequest(() =>
-    axios.patch<ApiResponse<IdentityProvider>>(`/idps/${providerId}`, values),
+    axiosInstance.patch<ApiResponse<IdentityProvider>>(
+      `/idps/${providerId}`,
+      values,
+    ),
   );
 
 export const deleteProvider = (providerId: string): Promise<unknown> =>
-  handleRequest(() => axios.delete(`/idps/${providerId}`));
+  handleRequest(() => axiosInstance.delete(`/idps/${providerId}`));

ui/src/api/schema.tsx

@@ -1,37 +1,37 @@
 import { PaginatedResponse, ApiResponse } from "types/api";
 import { handleRequest, PAGE_SIZE } from "util/api";
 import { Schema } from "types/schema";
-import axios from "axios";
+import { axiosInstance } from "./axios";
 
 export const fetchSchemas = (
   pageToken: string,
 ): Promise<PaginatedResponse<Schema[]>> =>
   handleRequest(() =>
-    axios.get<PaginatedResponse<Schema[]>>(
+    axiosInstance.get<PaginatedResponse<Schema[]>>(
       `/schemas?page_token=${pageToken}&page_size=${PAGE_SIZE}`,
     ),
   );
 
 export const fetchSchema = (schemaId: string): Promise<Schema> => {
   return new Promise((resolve, reject) => {
     handleRequest<Schema[], ApiResponse<Schema[]>>(() =>
-      axios.get<ApiResponse<Schema[]>>(`/schemas/${schemaId}`),
+      axiosInstance.get<ApiResponse<Schema[]>>(`/schemas/${schemaId}`),
     )
       .then(({ data }) => resolve(data[0]))
       .catch((error) => reject(error));
   });
 };
 
 export const createSchema = (body: string): Promise<unknown> =>
-  handleRequest(() => axios.post("/schemas", body));
+  handleRequest(() => axiosInstance.post("/schemas", body));
 
 export const updateSchema = (
   schemaId: string,
   values: string,
 ): Promise<ApiResponse<Schema>> =>
   handleRequest(() =>
-    axios.patch<ApiResponse<Schema>>(`/schemas/${schemaId}`, values),
+    axiosInstance.patch<ApiResponse<Schema>>(`/schemas/${schemaId}`, values),
   );
 
 export const deleteSchema = (schemaId: string): Promise<unknown> =>
-  handleRequest(() => axios.delete(`/schemas/${schemaId}`));
+  handleRequest(() => axiosInstance.delete(`/schemas/${schemaId}`));

ui/src/components/Layout/Layout.test.tsx

@@ -1,14 +1,14 @@
 import { screen } from "@testing-library/dom";
-import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 
 import { authURLs } from "api/auth";
 import { LoginLabel } from "components/Login";
 import { renderComponent } from "test/utils";
 
 import Layout from "./Layout";
+import { axiosInstance } from "api/axios";
 
-const mock = new MockAdapter(axios);
+const mock = new MockAdapter(axiosInstance);
 
 beforeEach(() => {
   mock.reset();

ui/src/index.tsx

@@ -4,8 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App";
 import "./sass/styles.scss";
 import { NotificationProvider } from "@canonical/react-components";
-import { apiBasePath, basePath } from "util/basePaths";
-import axios from "axios";
+import { basePath } from "util/basePaths";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,8 +17,6 @@ const queryClient = new QueryClient({
   },
 });
 
-axios.defaults.baseURL = apiBasePath;
-
 const rootElement = document.getElementById("app");
 if (!rootElement) throw new Error("Failed to find the root element");
 const root = createRoot(rootElement);