how to chain promise action?

[wulucxy]

I have two async requests，and one depend on the result of the other request:

const [{ data = {}, loading }] = useAxios({
    url: '/url1',
    params: { id },
  })

the next request need the value of data，so I need to write like this:

const [ ,findNext] = useAxios({
    url: '/url2',
  }, {
  manual: true
})

  useEffect(() => {
    if (data.code) {
      findNext({code: data.code})
    }
  }, [data])

this works，but it feels very ugly。I prefer the chained promise way，so do you have any advice, or
just write the normal useState way?

@simoneb

[simoneb]

There's an improvement you can do over this, but it feels like a little overkill to use hooks for it.

See the sample I put together here.

It's pretending to do something similar to what you're trying to achieve by first retrieving a list of todos and then requesting the details of the first of them, by its id property.

Basically, you create two manual requests and you use the Promise returned by invoking the refetch function of the first to extract the response and provide it as input to the second.

There's one drawback to consider here, which is a by-product of how the hook works. In your case you probably wouldn't want to cause the component to re-render after the first request completes and wait to get the response from the second instead. There is currently no way to achieve that with this library, because whenever any request triggered using the Hook gets a response, the component will re-render.
It may not be a big deal, but something to be aware of. For a scenario like this, I would consider not using the Hook in the first place.

[wulucxy]

@simoneb got it，thanks for your comment。