API call caching in react app

Moralis General
#1

Hi,

I am looking into reducing my API calls to Moralis to avoid touching its rate limit too quickly.
One way for my app is to implement some form of caching since many of these calls are similars throughout the App.

I wonder if this is something that anyone has considered including in the library OR is someone else implemented this?

For example using : https://www.npmjs.com/package/redux-cached-api-middleware

That might help everyone there : Moralis to reduce their server use and all devs to get faster apps.

#2

For React, I highly recommend React Query.

1 Like
#3

More investigation. I wanted to double check whether useMoralisWeb3ApiCall had some built in caching. It seems like it does NOT (would be curious if Moralis folks could confirm) although I think that would be the ‘right’ place to implement it.

some API call are for object that are mostly immutable (eg. NFTs), so once you have the data it makes little sense to get it again.

I managed to implement some caching with a modified version of this https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/

Great impact on UI load, easily 5x reduction in API call in my case.

Debating whether to build my own simpler hook or to use some other libraries.

#4

If it’s not mentioned in the docs it’s unlikely there is any caching. I think this is one of those things that’s left up to the user to implement because there are numerous tools or ways for doing so.

1 Like
#5

it does seem that React Query is the right tool here @alex

#6

I got useQuery to work with getTokenIdMetadata. Pretty simple to use indeed. I think I am going to use this tool a bit throughout.

#7

Good stuff. It is quite simple to get started but it also has a lot of really good features.

#8

So glad I did. It’s like I am going back form the cave. Everything is SO much faster now

1 Like