useEffect RateLimit suggestions

I am using the useApiContract function like this:

  function ViewLottoCountDown() {
    const { runContractFunction, data, error, isLoading, isFetching } =
      useApiContract({
        address: lottoAddress,
        functionName: "LAST_PLAYER_AT",
        chain: "mumbai",
        abi: msLottoAbi,
        params: {},
      });
    useEffect(() => {
      if (account && !data && !isFetching) {
        runContractFunction();
      }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [account, data, isFetching]);
    if (data) {
      return JSON.stringify(data);
    }
    return;
  }

I have multiple reads happening on page (10-20), and about 80% of the time the page takes a long time to load. Sometimes only half will load and the rest will take about a minute to show up. I’m thinking that there is a rate limit I must be breaking, the functions upon getting an error (400 error) will just try again without any breaks.
Within browser console all I get is

xhr.js:212          POST https://mdyoiqc6wp4m.usemoralis.com:2053/server/functions/runContractFunction 400

The above error is shown like 20+ times a second and causes lag on the website.
How do i add a break to the useEffect or make it so that the data isn’t requested so frequently?
Also another thing I have experienced with the way the code is set is that once the data is retrieved, it will never try to get fresh data until the page is refreshed. How could I for example grab data per second, when the user changes, or whenever it is updated in the smartContract?

Have seen Moralis server pinned at 100% cpu, and typically this is when I experience these 400 errors (Another reason I’m thinking rate limit).

you can look in browser network tab to see if it returned a message error specific to a rate limit

1 Like

I hadn’t known about this. Here is what the network tab shows:

XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	XHRrunContractFunction	
149 requests
703 kB transferred
14.8 MB resources
Finish: 16.60 s
DOMContentLoaded: 1.24 s
Load: 1.90 s
{code: 141,…}
code: 141
error: "Too many requests to Web3 API from this particular client, the clients needs to wait before sending more requests. This can be adjusted using Moralis.settings.setAPIRateLimit. Read More: https://docs.moralis.io/moralis-server/web3-sdk/rate-limit.

Is the best way to do this through Moralis.settings.setAPIRateLimit? Wouldn’t this mean that if the website loads half way, then the user has to wait a while for the rest to load in? If yes, what would optimal settings be?
Thanks!
(EDIT: Sorry about deleting last post, forgot to hit the reply button!)

you can read there about how to set that rate limit in cloud code
after that you make that change you may hit another limit, from the API

1 Like

I have implamented it and still have the same behavior.
Once the ratelimit is reached, the functions continue to get called causing massive lag to the page until the requests are actually returned.
If the app scaled this would be disasterous.
Is there no way to fix this issue? I am just one user on the app and am getting this, imagine what would happen with hundreds.

Deleted last post, Forum replies are somtimes broken. Replying to someones post will not work about 50% of the time, and will just post as regular comment (without reply). Trying again to make sure this is a reply.

you need to fix that problem somehow, I don’t know how, you should not make a lot of requests in a second.

I only pointed you on how that limit can be configured server side, but the application should not make so many requests to the server.

1 Like

I have upped this limit to encounter the errors less.
I have attempted to use this:

    useEffect(() => {
      if (account && !data && !isFetching) {
        if (error) {
          setTimeout(() => {
            runContractFunction();
          }, 8000);
        } else if (!isLoading && !isFetching) runContractFunction();
        return () => {};
      }

Although the timer doesn’t actually always get activated. My issue is that if i keep refreshing the page until I get the 400 ratelimit error then it will work fine with the timer (all functions using this useEffect are called every 8 seconds until there is data). But say I refresh the page once more (While getting this 400 rateLimit error), then the timers will be completely ignored and its back to step 1 (hundreds of requests a seconds until there is a reply). Why do you think this timer fails if I refresh again?

Also say I publish this application as it is, will other clients getting this ratelimit error affect how often my user gets the ratelimit?
Say my app on my browser encounters ratelimit errors, does every other user of this app on other browsers encounter it as well?
Thanks!

Sorry again, reply is broken…

why is reply broken? it works fine for me

1 Like

you could add a button for that runContractFunction and not call it when page loads automatically

1 Like

When i reply it doesn’t say reply in the top right of post, and your original post should have the amount of replies to it but has none. Have noticed that it does shows up under you post replies when deleted.

Edit: This one seemed to work fine.

don’t worry about that, you don’t have to make it show like it was a reply to my post

1 Like

This would greatly impact the look of the website. I’m thinkng of running the contract function once on load and thats it. Although this is not ideal. I would love for the functions to update every few seconds but it seems like that’ll be impossible with Moralis.
I don’t mind using the function in the way i have just posted (if it works), I just can’t seem to understand why it’ll break if i refresh the page on a 400 error (causing insane amounts of requests).
Have seen many websites similiar to mine updating almost as soon as the contract updates, wish this was possible without being limited.
Any way to call the read function without Moralis while using Moralis authentication?
Thanks!

Edit: reply to your previous comment, I just want to make sure that you recieve a notification for the reply!

there are ways to call that function with executeFunction (there is an equivalent in react), and in that case the RPC node from metamask will be used

but you should figure out first why it is called so many times
my react understanding is not so advanced to tell you exactly what is wrong

1 Like

maybe you can use a console.log instead of that function to see how many times it is called, maybe you get closer to the problem

1 Like

Have tried the use effect from above on a different page and i cannot seem to replicate the crazy requests. They seem to stop after first retry so it is working well. Will double check code on first page.
Thanks again!