Explore caching options for calling Paid APIs (Cicero)

[thyeggman]

The cicero API is billed on a crediting system. Each API call costs a certain number of credits. Some APIs are free to use, but as Amplify scales, the cost of using those APIs can become very high.

We are using axios to make requests to these APIs. Axios has a number of different libraries that support caching:

• https://www.npmjs.com/package/axios-cache-adapter
• https://axios-cache-interceptor.js.org/#/

Investigate these libraries to see what would be the best option to cache API calls to reduce the number of credits we use.

[ahn-nath]

Hello, @thyeggman, @paramsiddharth. Just to make sure I understand, does the requirement of this issue involves implementing the solution I researched/found? Or would that be out of the scope of this issue?

[ahn-nath]

Related to #29 and #270 [logic for using the Cicero API].

[paramsiddharth]

Hello, @thyeggman, @paramsiddharth. Just to make sure I understand, does the requirement of this issue involves implementing the solution I researched/found? Or would that be out of the scope of this issue?

@ahn-nath Yes, I think this issue requires some research. @thyeggman Jacob may be better able to explain to you what he discovered. It would definitely be in scope of this issue to research more, because we want to come up with a robust plan for the issue first before actually starting to code it. What do you suggest, Nath?

[ahn-nath]

Hello, @thyeggman, @paramsiddharth. Just to make sure I understand, does the requirement of this issue involves implementing the solution I researched/found? Or would that be out of the scope of this issue?

@ahn-nath Yes, I think this issue requires some research. @thyeggman Jacob may be better able to explain to you what he discovered. It would definitely be in scope of this issue to research more, because we want to come up with a robust plan for the issue first before actually starting to code it. What do you suggest, Nath?

Yes, Param. Thanks for responding, but my question is: does solving this issue specifically requires implementing the solution of the research? That is, coding it? Certain keywords and statements (such as the last paragraph of the description text) and the “explore” of the title confused me a little in regard to the objective.

[paramsiddharth]

Hello, @thyeggman, @paramsiddharth. Just to make sure I understand, does the requirement of this issue involves implementing the solution I researched/found? Or would that be out of the scope of this issue?

@ahn-nath Yes, I think this issue requires some research. @thyeggman Jacob may be better able to explain to you what he discovered. It would definitely be in scope of this issue to research more, because we want to come up with a robust plan for the issue first before actually starting to code it. What do you suggest, Nath?

Yes, Param. Thanks for responding, but my question is: does solving this issue specifically requires implementing the solution of the research? That is, coding it? Certain keywords and statements (such as the last paragraph of the description text) and the “explore” of the title confused me a little in regard to the objective.

@ahn-nath Researching more and coming up with a finalized version of the plan is part of the objective. The details in the issue description are a mere starting of the research we'll need for implementing it, which is also a part of this issue itself.

[ahn-nath]

@paramsiddharth
Awesome. The task consists in finding a robust solution that is supported by a feasible option and decent/strong research, as well as implementing it. Thanks for your time.

[thyeggman]

Yeah, this issue is meant to encompass everything. If it makes sense, once a solution has been decided on, we could create another issue with details for implementation.

[ahn-nath]

@paramsiddharth @thyeggman

Result of my research and assessment

List of libraries we have compared:

List:

• axios-cache-plugin
• cachios
• axios-cache-adapter
• axios-cache-interceptor

NPM

• axios-cache-plugin - npm
• cachios - npm
• axios-cache-adapter - npm
• axios-cache-interceptor - npm

GitHub

• GitHub - jin5354/axios-cache-plugin: Help you cache GET request when using axios.
• GitHub - AlbinoDrought/cachios: Simple axios cache wrapper using node-cache
• GitHub - RasCarlito/axios-cache-adapter: Caching adapter for axios. Store request results in a configurable store to prevent unneeded network requests.
• arthurfiorette/axios-cache-interceptor

---

Logic used to compare libraries:

We have prioritized the values or factors: reputation/popularity, maintenance frequency and status, relevant features for our case.

Reputation/popularity
Reputation or popularity across time is an important measure because it allows you to get a reference of the level of trust given to users over time. A widespread tool may not be a solid indicator of code quality alone, at least not in all cases. Yet, one of the factors to a tool becoming popular and sustaining or improving its popularity and download rate over time includes its usability and user preference over a product. I am not including the references here, but many developers in forums recommend the “popular tools” and indicate them as an alternative or good solution for a problem. By recommending them, they contribute to popularity.

Download count comparison

Source: https://npmtrends.com/axios-cache-adapter-vs-axios-cache-interceptor-vs-axios-cache-plugin-vs-cachios

Ranking:

1. axios-cache-adapter
2. axios-cache-interceptor
3. axios-cache-plugin
4. cachios

---

Maintenance frequency and status
We take it as a value for comparison because a code that is maintained regularly and attends the user’s need, as well as relevant feedback, will be less prone to errors. The code can be more robust if it responds to such demand. We will measure it by the number of issues opened (that remain open/have not been solved) and the last time the repository it was updated:

Ranking:

1. axios-cache-interceptor (it has a dedicated website for the documentation)
2. cachios
3. axios-cache-adapter
4. axios-cache

---

Features
The features yielded a harder comparison, since it was preferred that I had a better experience with each one, before the preliminary research. However, given that fully testing each library with the relevant features would take me 2 days of experimenting with each, I decided to look for similar and trusted sources of comparison. The references I am using are from the axios-cache-interceptor analysis and comparison page:

Source: https://axios-cache-interceptor.js.org/#/pages/comparison

Benchmark performance:

# Result

Run at Fri, 25 Mar 2022 19:32:04 GMT
Commit: 8297fe2201e588f3a8ff69341c6031a7063b55c5


CACHE INTERCEPTOR
Operations: 44182/s
Network requests: 1 of 223037
Performance: 100%

CACHE ADAPTER
Operations: 37359/s
Network requests: 2 of 184213
Performance: 85%

AXIOS
Operations: 1903/s
Network requests: 9460 of 9460
Performance: 4%

Ranking:

1. axios-cache-interceptor
2. axios-cache-adapter

NOTE: given the last rankings, I am keeping the top 2 to focus on testing them and getting to a final result.

---

Personal experience

Playground space
Sample code for the tests

There are two versions:
Version V1: axios-cache-interceptor
Version V2: axios-cache-adapter

I could not install axios-cache-adapter in Codespaces with the project and have used JavaScript Playground to fairly compare both libraries. I believe is related to this issue: lisaogren/axios-cache-adapter#270

Opinion:
axios-cache-interceptor was easier to set up and install, less verbose, and more intuitive, it took me 5 min to set up everything and get a response. With axios-cache-adapter, it took 10-15 min and I could not install it with the project, but the response took just slightly more time to be returned.

Ranking:

1. axios-cache-interceptor
2. axios-cache-adapter

---

Final thoughts:

I support that axios-cache-interceptor is the best option:

• It is constantly maintained, and the response rate is better than the top 2 library. We want to make sure we don't waste time and resources figuring out the architecture or logic behind important features with experimentation. Naturally, we will eventually will, but if it can be avoided and the focus can be put on actually solving the problem we care about efficiently, that is better.
• The reputation is stable and strong. Given that it was developed one year ago, if we were to give a fair comparison with the top library (that was developed 5 years ago), it would probably be just as popular and supported by users, or even more.
• It provides more flexibility and functionalities that are intuitive and could come handy in the future.
• It was easier to set up and use.

---

I will be looking forward to your thoughts.

[paramsiddharth]

@paramsiddharth @thyeggman

Result of my research and assessment

List of libraries we have compared:

List:

• axios-cache-plugin
• cachios
• axios-cache-adapter
• axios-cache-interceptor

Logic used to compare libraries:

... -snip

Final thoughts:

I support that axios-cache-interceptor is the best option:

... -snip

I will be looking forward to your thoughts.

@ahn-nath Amazing work on the research, Nath. It really helps a lot. You took time to explicitly test out the individual libraries and compare their features, which is exactly what we need to make the final decision on what to use for implementing the caching moving forward. It is unbelievable how well you document your work and research. Good job! Moving from here, let's wait for Jacob (@thyeggman) to assess the research and share his opinion of what path we should choose.

[thyeggman]

Thanks for your thorough examination of all the libraries! I had originally picked axios-cache-adapter and axios-cache-interceptor because of their quality documentation, and it's good to hear that those factors were included in the conclusion. Obviously the features included on the interceptor page will favor that solution somewhat, but given all the other evidence and the ease of learning the package because of the good documentation, I support your decision to move forward with the interceptor.

[ahn-nath]

Thanks for your thorough examination of all the libraries! I had originally picked axios-cache-adapter and axios-cache-interceptor because of their quality documentation, and it's good to hear that those factors were included in the conclusion. Obviously the features included on the interceptor page will favor that solution somewhat, but given all the other evidence and the ease of learning the package because of the good documentation, I support your decision to move forward with the interceptor.

Hi, Jacob. Thanks for the feedback.

Good. I will move on with the implementation then.

[arthurfiorette]

@ahn-nath a friend of mine sent me this issue and omg, nice research!. I'm super happy that you've decided to go with axios cache interceptor 😍

[ahn-nath]

@ahn-nath a friend of mine sent me this issue and omg, nice research!. I'm super happy that you've decided to go with axios cache interceptor 😍

Hey, @arthurfiorette. I am very pleased to receive this. You are doing a great job with the tool, and it's only to be admired, so thanks!