16 replies

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
  }

TTC

Theo's Typesafe Cult•2y ago•

16 replies

Matt

Guidance on Client Refresh after Server Action

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
  }

Guidance on Client Refresh after Server Action

Guidance on Client Refresh after Server Action

Similar Threads

Similar Threads

Similar Threads