Theo's Typesafe Cult•2mo ago

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•2mo 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•2mo ago

just add more state bro 🤓☝🏿

Matt•2mo ago

Awful at satire over the internet here… is this the same as “just one more lane bro” ha…

c2•2mo ago

no seriously add some sort of "current-panel" state and just do a switch with a default transition

Matt•2mo 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•2mo 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•2mo ago

Definitely, I'm going to refactor this one after thinking about it more with your comments. Extremely helpful again

c2•2mo ago

np 👍🏿

Gaming

Programming

Guidance on Client Refresh after Server Action