fix: fetch results cached st not getting latest data

[kittybest]

Description
The attestations are cached for long time, which causes user not getting the latest approved attestations.

Related Issues
close #213

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maci-rpgf	❌ Failed (Inspect)			Jul 31, 2024 6:11pm

[0xmad]

@kittybest thanks, just one comment

[0xmad]

It's not a good practice to reload page on action/success/error.

[kittybest]

Agree, but I don't have better way to call fetch immediately 🤔
How about I made the refetchInterval to 10 seconds like now?

[0xmad]

This lib has something for immediate refetching values, the docs should have this.

[kittybest]

So what I wanna do is to refetch instantly in onSuccess

[0xmad]

Right, but make sure you don't call it in a loop, so if there are no new data, just skip refetching.

[kittybest]

@0xmad how do you think I changed to something like this now? (but I think the data is not updated right after isSuccess so should call after something like 3 seconds? the isSuccess is too fast which is earlier than the transaction succeeded QQ)

[0xmad]

@0xmad how do you think I changed to something like this now?

Can you show what you mean?

[kittybest]

so now I split some functions out the fetchAttestation.ts file, and instead of setting cacheInterval to 0 for uncached fetch, made another file for normal fetch, since the node-fetch-cache package cannot be imported or called in the browser. Once the application is approved, the useEffect hook would call normal fetch and merge the results with the original fetch result.

But if it refetch once it's isSuccess, the attestation is actually not yet updated, so I made it sleep for 5 seconds and refetch.

[0xmad]

I think it's good as a temporary solution.

[kittybest]

open an issue for it: #229

[kittybest]

Problem
Currently already tried several ways to refetch the latest data, now already made sure it would call refetch right after succeeds, but no latest data loaded. Right now I think reload the current page is the best way to complete this PR, we could find another way to solve this problem in the future, but I think it's important to make sure user get the instant update on data status and prevent them from approving same applications.

or add the approved applications into the list using useState after approve.isSuccess, no matter what actually is returned from the useQuery, just to prevent coordinator approving same application twice; if some of them are failed, they would find it out after they do anything else.

[0xmad]

Suggested change

	const timeout = setTimeout(() => {
	fetchData();
	clearTimeout(timeout);
	}, 5000);
	const timeout = setTimeout(() => {
	fetchData();
	}, 5000);
	return () => clearTimeout(timeout);

[0xmad]

@kittybest thanks!