And this is when I refresh on the same page as it was on the above screenshot:
As you can see, these requests are not being made at all.
It may not need to do all those requests again, if you want information from MetaMask all you need is web3
Then what do I need Moralis for, if I can’t use its hooks, to get the information I need?
I looked now at the video, for nativeBalance it doesn’t really need metamask to get that info, it will make a request to your Moralis Server, it only needs metamask to know the account eth address at the initial authentication
now you say that it doesn’t even make those calls to get the native balance when it doesn’t work, and it can not show the data if it doesn’t make those calls
the problem seems to be somehow that it doesn’t make those calls on refresh
maybe you need to use some of the variables that it returns:
return {
getBalances: fetch,
data: {
balance: data?.balance,
formatted,
},
nativeToken,
error,
isLoading,
isFetching,
};
And I do use them in my real application, the code I shared above is just a minimal example that reproduces the bug, I am using those on my application and I am trying to read them and output them in my interface.
And yes, the problem is that it stops making those calls after the first connecting to Metamask.
maybe you can call this to fetch
or check these variables:
I just tried that and isFetching is true only the first time, it never gets set to true after that, so indeed, the API just does not fetch the data, which leads me to believe that this should be something very easy to fix in the react-moralis api…
In dev mode isFetching always gets set to true before it retrieves the data, when I build the project, it gets set to true just once, after the initial first sign in where it connects to Metamask and tahts it, it never gets set to true after that.
maybe you can force a fetch with that getBalances: fetch,
I just tried using the getBalance and fetchERC20Balances both of which when activated seem to be working now and retrieving the balances and sending the requests, however this still seems like a bug, its working on dev mode, I cant even think of a reason why that wouldnt work normally. And now I need to write logic about fetching… So thanks, at least finally you helped me find a way to get it working.
I am new to all of this in general, but if I have to write custom code for that, or dealing with web3 directly, why do I need Moralis in the first place?
This has nothing to do with the issue, useEffect runs before a render, I need the data in before the render, so normally, I would try to load that data into a useEffect hook, if the issue as you claim was in my code, then the dev server wouldnt work either, would it not?
Would you be please so kind as to fix my code and show me what it should look like, its just a few lines of code, and I have not seen fetching outside of useEffect or getServerSideProps, so what am I missing here?
I should not need to explicitly fetch the balances, when they have the balances variables exposed, that should be handled internally within the hook.
1 Like
in case that you know what is wrong in the hook, this seems to be the code for that hook: https://github.com/MoralisWeb3/react-moralis/blob/beta/src/hooks/web3ApiWrappers/useNativeBalance/useNativeBalance.ts
I have narrowed it down, but I can’t fix it, I actually did take a look and I am simply guessing hat some dependency somewhere in these useMemo hooks (or others deeper), just dont get reactivated and they dont refetech.
Hi Yomoo, thanks, but this is a different issue, like I said, Moralis works just fine in development mode, it doesnt when I do npm run build && npm run start, in the thread that you provided, the person describes how to wrap the app in the MoralisProvider which I have done, MoralisProvider is the main wrapper around every single thing in my app, even my UserProvider is within it, so its:
const App = ({ Component, pageProps }: AppProps) => {
return (
<MoralisProvider
appId='appid'
serverUrl=serverurl'
>
<UserProvider>
<ThemeProvider theme={theme}>
<Head>
<title>Trading Pal</title>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, user-scalable=no'
/>
</Head>
<GlobalStyles />
<Header />
<Component {...pageProps} />
<Footer />
</ThemeProvider>
</UserProvider>
</MoralisProvider>
);
};
And for the example that I started with that uses nothing additional:
import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<MoralisProvider
appId="appid"
serverUrl="serverurl"
>
<Component {...pageProps} />
</MoralisProvider>
);
}
export default MyApp;
As you can see its very barebones and it is reproducing the problem that I am having (coupled with the code from my first post)
The only different thing that I see in that persons post is that he is wrapping MoralisDappProvider with MoralisProvider but I cant find any such thing, either in the linked boilerplate code, or within Moralis itself, so it seem to me that this is some custom context that he did for himself and unless theres some magical code in there, I dont think that this is the problem.
Please let me reiterate this, because I think when people read the thread are missing it:
The app is working perfectly in dev mode the problem occurs only when the app is deployed, regardless of if its deployed locally (that meaning, running npm run build and then npm run start), or a hosting provider (that is irrelevant). As soon as I build and run it, it no longer sends requests to the Moralis server (getNativeBalance, getTokensBalance), they just do not get sent at all, confirmed by the Network tab, and I have posted screenshots above, showing how the app is making requests every single time I refresh/relog to retrieve the data from the moralis server and how it is no longer doing that, once I build it.
And its not only on refresh if I change the network, state gets updated, but its still not even trying to retrieve my balance from the new chain.
There are no errors, I have wrapped every single async function in a try/catch block, logging the errors, but there is nothing.
So if I have issues with wrapping, or some fundamental setup of Moralis, wouldnt that make it not work in dev mode too?
So what am I doing wrong?
P.S. Merry Christmas!
did you also check that error variable?
I checked all error variables, nothing nowhere.
ok, you could use that solution with explicit fetch for now
Yeah, where I have to write my own useNativeBalance and useERC20Tokens hooks… I can do it, I just dont understand why its not working as it is, its driving me crazy, since its working in dev just fine.
It will be nice if you share your git repo so we will be able to check it on real issue