Navigating the use of axios within a monorepo

I am working on a monorepo that consists of multiple clients, and I am trying to determine the best way to handle axios in this project.

Here are some key points:

  1. Each client may or may not have the same interceptors.
  2. Clients share some API endpoints (shared composables like user.composable -> getUser(): IUser), but they also have their own unique ones (user.composable -> getClientXData(): unknown) which should only be compiled and visible within their respective builds.
monorepo/
├─ apps/
│  ├─ client1/
│  │  ├─ composables/
│  │  │  ├─ user.composable.ts
│  ├─ client2/
│  │  ├─ composables/
│  │  │  ├─ user.composable.ts
│  ├─ client3/
│  │  ├─ composables/
│  │  │  ├─ user.composable.ts
├─ packages/
│  ├─ composables/
│  │  ├─ user.composable.ts
│  ├─ models/
│  │  ├─ IUser.ts

Do you have any suggestions on how to effectively manage this situation?

typescriptaxiosvuejs3monorepo

Answer №1

To enhance the axios service package for universal consumption, I propose a unique approach.

Instead of applying interceptors directly on the default axios instance, the idea is to create separate instances tailored to each app's specific requirements. (Shared interceptors can still be set up on the default axios instance)

Furthermore, incorporating OOP principles with the Factory Design Pattern could be beneficial. By structuring a class containing shared API endpoints and additional classes for individual apps or functionalities that inherit from this base class, any app can efficiently utilize the axios-service by passing relevant property to the factory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of ReactJS and TypeScript within a Visual Studio environment for an MVC5 project

I am currently working on creating a basic example using ReactJS and TypeScript in Visual Studio 2015. Despite following several tutorials, none of them have met my specific requirements or worked as expected. My goal is to develop components as .tsx fil ...

visual-studioreactjstypescript

How to conceal the side navigation bar on specific pages or components within an Angular application

Currently immersed in developing a web application with Jhipster and Angular. I've managed to set up a side navbar along with a top navbar on every page. However, I'm struggling to hide the side navbar on specific pages and could use some guidanc ...

angulartypescripthidenavbarjhipster

Utilizing TypeScript to Define Object Properties with String Keys and Values within Parentheses

I am in the process of developing a telegram bot I have the need to save all my messages as constants My message schema is structured as follows: type MessagesSchema = { [K in keyof typeof MessagesEnum]: string } Here is an example implementatio ...

javascripttypescript

What type should be used for a Mongoose collection model in TypeScript?

Hello everyone, I am new to TypeScript and I am trying to create an Auth controller class that requires a mongoose model in the constructor. However, I am struggling to determine the datatype for the mongoose model. When I checked the datatype for the mon ...

typescriptmongoose

You cannot use the term "prototype" to reference a class type

As per the documentation of Typescript, the correct type for defining a class constructor is as follows: type Class = { new (...args: any[]): {} } If you try to access this type like this: type ClassPrototype = { new (...args: any[]): {} }["prototype"] // ...

typescriptclassprototype

Tips on utilizing the identical template in ngIf

I need to display different templates based on certain conditions. For example: <template [ngIf]="item.url.indexOf('http') == -1"> <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" > ...

javascripthtmlangulartypescriptangular-ng-if

How to change the return type of a method with multiple overloads in TypeScript

I am currently developing an open-source library that creates Proxies for Rx Observables. (For the sake of simplicity, I will use Box<A> instead of Observable<A>) The library takes a Box<A> as input and returns a type { [P in keyof A]: ...

typescripttypestype-conversion

Omitting prop types in Higher Order Components using Typescript

My HoC named withDataTableQuery is equipped with features such as fetching and passing data for the DataTable component. This HoC is connected to the redux store, where the data resides. The data from the store is passed to the withDataTableQuery through p ...

javascriptreactjstypescript

The mystery of Angular 2: Unveiling why ActivatedRoute.params always returns an empty object

I've been facing an issue with accessing the :id route parameter in a router guard. It seems to always return an empty Object{}. Initially, I was unsure of how to approach this problem, so I referred to this question for guidance. However, it didn&ap ...

angulartypescriptangular-routing

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

javascriptangulartypescript

What is the solution for correcting a glitch in smooth scrolling behavior that occurs following the page's initial rendering?

Upon loading the page or when the user updates it, there seems to be an issue with smooth scrolling to the desired position on the site (lower than needed). How can this be resolved so that everything functions correctly even after the page has finished r ...

cssreactjstypescriptnext.jsreact-scroll

Disabling ion-select in Ionic 2 with Typescript

To disable an ion-select element in Angular, you can use the disabled attribute like this: <ion-item> <ion-label stacked>Property Type</ion-label> <ion-select [(ngModel)]="propType" (ionChange)="ionChanger()" di ...

angulartypescriptionic2

The type 'Observable<{}>' cannot be assigned to the type 'Observable'

Before I begin, let me say that I have come across many similar questions with the same issue, but for some reason, I can't solve mine. My setup is quite simple - a basic service and component. I'm closely following the angular2 hero tutorial. B ...

angulartypescript

Using an Enum member as an index for a Record<S,O> type: Is it possible?

When designing a library, I wanted to implement the feature of allowing users to modify its configuration using presets. My approach was to define an Enum containing all possible presets and exporting it with the select function. Unfortunately, my initial ...

typescriptenums

Using TypeScript: Implementing array mapping with an ES6 Map

If I have an array of key-value objects like this: const data = [ {key: "object1", value: "data1"}, {key: "object2", value: "data2"}, {key: "object3", value: "data3"}, ] const mappedData = data.map(x => [x.key, x.value]); const ES6Map = n ...

javascripttypescriptdictionaryecmascript-6

I offer a unique service that creates custom toolbars with a variety of classes to choose from

menu component import { QueryParam } from "./query-param"; import { QueryRouterLink } from "./query-router-link"; export class Menu { link: string; name: string; queryParam: QueryParam[]; queryRouterLink?: QueryRouterLink; } QueryParam class e ...

javascriptangulartypescriptservice

Type of Data for Material UI's Selection Component

In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...

javascriptreactjstypescriptreact-nativematerial-ui

State remains unchanged despite calling setState

When working with React, I encountered an issue in my function called setTitleAndBody. Even though the object result is being logged correctly and displaying the title and body information in the developer console, the setState method is not updating the ...

javascriptreactjstypescript

Angular 6 Leaflet Marker Clusters with Custom Cluster Icons

I've been working on implementing Marker clusters in Angular 6, and while the markers themselves are displaying correctly, I'm having trouble setting the icons. Here is a screenshot for reference: https://i.sstatic.net/aQoau.jpg. Here is the HTM ...

angulartypescriptleafletangular6leaflet.markercluster

Jest is having difficulty locating a module while working with Next.js, resulting in

I am encountering some difficulties trying to make jest work in my nextjs application. Whenever I use the script "jest", the execution fails and I get the following result: FAIL __tests__/index.test.tsx ● Test suite failed to run ...

reactjstypescriptjestjsnext.jsts-jest