Guidance on Client Refresh after Server Action

Hey all, just looking for some guidance or maybe a push in the right direction on how to handle the client side after a revalidatetag/revalidatepath options in a server component. I have the video below that's drawer component getting a promise passed to it then using React.use on the client. Put some of the code below to follow all the way through but wanted to see if there's any thoughts. I'm initially thinking that it's not possible and have to use something client side like SWR but wanted to at least ask and see if anyone has something simple I'm just missing... page.tsx
export default async function Page({params}: PageProps) {
const promise = getPromise(params.slug)
return (
<ClientComponent promise={promise} />
)
export default async function Page({params}: PageProps) {
const promise = getPromise(params.slug)
return (
<ClientComponent promise={promise} />
)
client-component.tsx
export default function ClientComponent({promise}: ClientProps) {
const { Drawer, setShowDrawer } = useDrawer(promise)
const { item1, item2 } = React.use(promise)

return (
<Drawer />
<Card>
...
<Button onClick{() => {setShowDrawer(true)}>Config</Button>
</Card>
)
}
export default function ClientComponent({promise}: ClientProps) {
const { Drawer, setShowDrawer } = useDrawer(promise)
const { item1, item2 } = React.use(promise)

return (
<Drawer />
<Card>
...
<Button onClick{() => {setShowDrawer(true)}>Config</Button>
</Card>
)
}
drawer-component.tsx
function DrawerComponent ({promise, showDrawer, setShowDrawer}: DrawerProps) {
const [isPending, startTransition] = React.useTransition();
const { item1, item2 } = React.use(promise)

function onSubmit(inputs) {
startTransition(async () => {
const { data, error } = await createDirectory(item1, ...inputs)
if (error) {
toast.error
setShowDrawer(false)
}
if (data) { toast.success }
}

const Content = (
<Form {...form}>
<form
onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}
>
...
</form>
</Form>
return (
<Drawer>
{Content}
</Drawer>
)
}
function DrawerComponent ({promise, showDrawer, setShowDrawer}: DrawerProps) {
const [isPending, startTransition] = React.useTransition();
const { item1, item2 } = React.use(promise)

function onSubmit(inputs) {
startTransition(async () => {
const { data, error } = await createDirectory(item1, ...inputs)
if (error) {
toast.error
setShowDrawer(false)
}
if (data) { toast.success }
}

const Content = (
<Form {...form}>
<form
onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}
>
...
</form>
</Form>
return (
<Drawer>
{Content}
</Drawer>
)
}
actions.ts
export async function createDirectory(item1, inputs) {
noStore()
...
revalidatePath('/path')
return {
data: data
error: null
}
export async function createDirectory(item1, inputs) {
noStore()
...
revalidatePath('/path')
return {
data: data
error: null
}
8 Replies
Matt
Matt4d ago
The main idea is to get the TenantUrl and Secret Token to show without the rerender and I meant to put sheet for what's shown in the video... the drawer only shows on mobile
c2
c24d ago
just add more state bro 🤓☝🏿
Matt
Matt4d ago
Awful at satire over the internet here… is this the same as “just one more lane bro” ha…
c2
c24d ago
no seriously add some sort of "current-panel" state and just do a switch with a default transition
Matt
Matt3d ago
Ha ok cool cool I’ll give it a go thanks! Thanks for the tip. Another state and simple use of transitions solved it. Completely overlooked the transition side of it to begin with…
c2
c23d ago
🙏🏿 no problem u should've realised that the sidebar itself contains display state (active, display-thing1, display-thing2 also always try to update whats actually in the content rather than reload take the idea of SPA and put it everywhere so each component can render all its states
Matt
Matt2d ago
Definitely, I'm going to refactor this one after thinking about it more with your comments. Extremely helpful again
c2
c22d ago
np 👍🏿