The data in my canister is not refreshed in the front end

Developers
1

hey i want my dapp to refresh every time the page is reloaded. I am currently using react, and node. The way id usually do this is with the <BrowserRouter forceRefresh={true}> component in react. But it doesnt seem to be doing anything here. There are ways to refresh the page but i havent been able to find anything that does the above. namely only refreshing ONCE on page load. Why is the above component not working while it works in my dapp for my other webapps? can someone help.

2

Hello valiantlynx! I’m happy to help. Could you maybe provide me with minimal reproducible example as a starting point? That would help greatly. I’m familiar with both the asset canister code and react, but haven’t touched react for a while now so trying to reproduce the issue would be a rocky road for me.

1 Like
3

ok. thanks for the help i took an old project and replicated it. you can find and fork it here : https://github.com/valiantlynx/codeExample.git.
This is how it looks

image
image1920×1080 61.1 KB

.
.
There are three <Link /> component that lead you to three places
Home - link on logo
Initial balance - always 300
current balance -depends on what you do.
i have some other function that allow you to play around.

Since i am using browser router if you reload in other places than home you get an error. this is also a problem.
for the same reason you can use the other function but only from the home url.
The balances come on the bottom of the card like so.
image
.
.
Problem:
if you top up some money you expect the current balance to increase and initial balance to always stay the same. This happens on the backend but doesnt show on the front end.
first try to topup some cash, then check the current balance. what youd find is that it did not update and only shows the result of the former query to the canister. This happens even though i have the <BrowserRouter forceRefresh={true}> component
if i refresh the page(from home) manually then it updates. but is is because i dont want to do i manually that i have the above component. i expect forceRefresh to reload the page and by doing this get the updated values.
there are ways or making the page refresh periodically but i only need to refresh once evry time i click the links.

4

I helped myself with this stackoverflow question, either adding key={Date.now()} to Route component, or, adding reloadDocument to Link component will cause to automatically reload the page after each change:

                <Route exact path="/" key={Date.now()} />

                <Route path="/initial" key={Date.now()} element={<h1>Initial Balance: $<span id="value">{balance0}</span></h1>} />
                <Route path="/current" key={Date.now()} element={<h1>Current Balance: $<span id="value">{balance}</span></h1>} />

or

                <Link
                    reloadDocument
                    to="/" >
                    <center>
                        <img
                            src="default.svg"
                            alt="logo of variant bank"
                            width="100"
                            role="img"

                            aria-label="Bootstrap" />
                    </center>
                </Link>
                <div className="divider"></div>
                <Link reloadDocument className="link" to="/initial" >Initial Balance</Link>
                <Link reloadDocument className="link" to="/current">Current Balance</Link>

Would that solve your issue?

1 Like
5

how did you stop it from sending thisCannot GET /current error. when using browserrouter. i think it works but this

problem seems to occur and the link just freezes and get deactivated.

6

Right, so there is another issue, but I walked around it by simply deploying the app to the mainnet dfx deploy --network ic.

The canister lives locally under e.g. http://localhost:4943/?canisterId=aaaaa-bbbbb-ccccc-ccccc-ddd
however, the <Link component strips away the ?canisterId=aaaaa-bbbbb-ccccc-ccccc-ddd, e.g. here

<Link reloadDocument className="link" to="/initial" >Initial Balance</Link>

, therefore you’re now trying to access http://localhost:4943/initial, whereas instead, you should try to access http://localhost:4943/initial?canisterId=aaaaa-bbbbb-ccccc-ccccc-ddd. Without the canisterId part, the local replica is unable to serve you anything.

Unfortunately, I’m not sure what’s the best way to dynamically get canisterId - maybe @kpeacock will know.
@kpeacock what’s the best way for JS project to make the links aware of host canisterId, e.g.

<Link to="/initial?canisterId=???">Initial Balance</Link>

@valiantlynx this problem does not exist on mainnet, because on mainnet the canisterId is backed into the host-part of the URL, e.g. https://aaaaa-bbbbb-ccccc-ddddd-ddd.ic0.app/initial, and everything works there as expected

1 Like