Profile server client refresh #420
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
bitbeckers
changed the title
There was a problem hiding this comment.
I'm struggling a bit to come to grips with how all of this works. I understand we're polling from the client side now, but I'm not sure how the api routes get invalidated as they will be caching results as well. Calling revalidateServerPath("profile/[address]") will invalidate the cached data for all server components. I take it that it will invalidate all api's under that "profile/address" path as well? Because that data is now not server-component bound anymore but being fetched using react-query.
Another question: how does this data get invalidated if the user closes their window before the transaction completes? Are we then stuck with stale data until the next invalidation due to interaction (or vercel deploy)?
components/profile/hypercerts-tab/hypercerts-tab-content-claimable.tsx
Outdated
Show resolved
Hide resolved
| `/profile/${account.address}?tab=hypercerts-claimable`, | ||
| `/profile/${account.address}?tab=hypercerts-owned`, | ||
| ]); | ||
| await refreshData(getAddress(account.address!)); |
There was a problem hiding this comment.
It seems like we are not invalidating /hypercerts/${selectedHypercert?.hypercert_id} anymore now.
There was a problem hiding this comment.
If I read the correctly, we should precisely specify all API call paths: https://nextjs.org/docs/14/app/api-reference/functions/revalidatePath
correct?
There was a problem hiding this comment.
Depends on what you mean by API call path. As I understand it, the paths you specify here are supposed to be frontend paths, and not api paths. The server components that use fetch to get data before being rendered that are in those frontend paths will then have their cache purged, which results in them refetching data when refreshed.
There was a problem hiding this comment.
Updated the invalidation methods to match the profile, api and hypcert view pages according to the doc. Again, a bit pending on this one to be completed to validate: hypercerts-org/hypercerts-api#254
There was a problem hiding this comment.
@bitbeckers I would like to test this on a preview branch before resolving but there are currently issues with it being deployed
There was a problem hiding this comment.
@bitbeckers still some deployment errors
There was a problem hiding this comment.
it's live @Jipperism
There was a problem hiding this comment.
It's very frustrating but it doesn't seem like the cache is being invalidated, after successfully claiming a fraction it still shows up on the claimable fractions page.
allowlists/actions/getAllowListRecordsForAddressByClaimedWithMetadata.tsx
Outdated
Show resolved
Hide resolved
components/profile/hypercerts-tab/hypercerts-tab-content-claimable.tsx
Outdated
Show resolved
Hide resolved
components/profile/hypercerts-tab/hypercerts-tab-content-owned.tsx
Outdated
Show resolved
Hide resolved
Refactors and optimises the data fetching of the tabs pages to speed up the loading of the data
typo in filename, console logs, redundant business logic
Replace useQuery implementation in hypercerts-tab-content and -counts component with hooks for reusability
Removes unused hooks and services from the hypercerts folder
Updates the refreshData methods in the unclaimed hypercerts claim and batch claim button to: - invalidate the user's profile page - invalidate the relevant API paths - all hypercert view pages for the claimed fractions hypercert IDs
- Refactors the refactor into server side data fetching, aiming for as much SSR as possible - Moves actions for hypercerts and allowlist into `actions` folder to make their purpose explicit - Removes the suspense boundary on the hypercerts-tab-content component and puts it on the highest level possible - the UnclaimedFractions table - Adds allowlist action for fetching unclaimed fractions with metadata attached
- removes the delete action from the metadata fetcher. The requestmap is ephemeral so we let is run with the lifecycle of the method
bitbeckers
force-pushed
the
fix/profile_server_client_refresh
branch
from
2825095 to
7bd88f5
Compare
Refactors the data fetching of the hypercert profile tabs to user server side APIs. Also implements a path invalidation flow that clears cached calls when a fraction claim was succesfully executed