How to extract/infer or easily pass down useAction Types?

[feliche93]

I have some useAction I want to call in a component and reuse some of the returned values to passen down to another component, e.g.:

  const {execute: executeGetSerps, status: statusGetSerps, result: getSerpsResult} = useAction(getSerps, {
    onSuccess({ data }) {
      if (!data) return
      console.log(data)
    },
  })

Types such as status are easy to pass, as they are the simple HookActionStatus that I can import. But how can I pass down easily the execute or result type of maybe also just infer the data object from the onSucces callback without having to redefine the whole returned object?

  <FormWebsiteInfoProps 
    executeGetSerps={executeGetSerps}
    statusGetSerps={statusGetSerps}
    getSerpsResult={getSerpsResult}
  />

export interface FormWebsiteInfoProps {
  executeGetSerps: ?
  statusGetSerps: HookActionStatus
  getSerpsResult: ?
}

So I guess this is more of a skill problem of me not understanding how to properly infer types from the hook 😬.

Also passing down the entire action would be interesting, but how could I pass all the type info with it, e.g.:

const action = useAction(getSerps)

<ChildComponent
  action={action}
/>

export interface ChildComponentProps {
  action: ???
}

Thank you 🙏

[TheEdoRan]

This will be solved by #235, which will add exported infer utility types, including for the hooks.

[feliche93]

@TheEdoRan awesome thank you so much for adding this so quickly 🙏 Would love to test this and see an example of how to use this correctly.

Thank you so much!!!

[TheEdoRan]

You're welcome!

PR is merged, update to v7.6.4 to get exported Infer types.

Would love to test this and see an example of how to use this correctly.

Added a page for type inference on the docs website: here.

[feliche93]

Awesome job @TheEdoRan 💪 Thank you so much for adding this! Really appreciate it and huge fan of next-safe-action! Looking to also write some content on my blog about it 🥳

[TheEdoRan]

Great, thank you!