Add documentation on how to best chain requests. about axios-hooks

[simoneb]

This question was asked in this issue: #166. Unfortunately the link in my comment is gone so you can't see the code, but it's conceptually similar to what you did above.

Chaining multiple requests consists in awaiting the promise returned by the refetch function returned by useAxios.

I'll take note to:

• document that the return value of that function is a promise
• create an example for request chaining

As for the runWhen option, I'm thinking if that could somehow be achieved by extending the existing useCache option to accept a function instead.

[simoneb]

https://github.com/simoneb/axios-hooks/issues

[PupoSDC]

Apparentely you can await the get function returned by axios-hooks:

export default (valueZero: string): ResponseValues<string> => {
  const [{
    data: valueOne,
    error: errorOne,
    loading: loadingOne,
  }, getValueOne] = useAxios(`/api/${valueZero}`, {manual: true});

  const [{
    data: valueTwo = '',
    error: errorTwo,
    loading: loadingTwo,
  }, getValueTwo] = useAxios('', {manual: true});

  useEffect(() => {
    let isCancelled = false;  
    const getValueOneThanTwo = async () => {
        const response = await getValueOne(undefined, {useCache: true});
        const valueOne = response.data.valueOne;
        if (valueOne && !isCancelled) {
          getValueTwo(`api/${valueOne}`, {useCache: true});
        }
    }
   if (valueOne > 0) {
      getValueOneThanTwo()
    }
    return () => isCancelled = true;
  }, [valueZero, getValueOne, getValueTwo]);

  // wrapping it as a ResponseType for convenience ;)
  return {
    data: valueTwo,
    error: errorOne || errorTwo,
    loading: loadingOne || loadingTwo,
  };
};

it still looks a bit complicated. But it has improved the code. A perfect solution would be to somehow tell useAxios when to run the query in the qeury parameters. something like:

export default (valueZero: string): ResponseValues<string> => {
  const [{
    data: valueOne,
    error: errorOne,
    loading: loadingOne,
  }, getValueOne] = useAxios(`/api/${valueZero}`, {runWhen: () => valueZero.length});

  // this wont work, dont try to copy paste it
  const [{
    data: valueTwo = '',
    error: errorTwo,
    loading: loadingTwo,
  }, getValueTwo] = useAxios(`/api/${valueOne}`, {runWhen: () => valueOne.length});

  // wrapping it as a ResponseType for convenience ;)
  return {
    data: valueTwo,
    error: errorOne || errorTwo,
    loading: loadingOne || loadingTwo,
  };
};

But I'd need to dig into to the code to see if something like this is even possible, and know the creators opinion if it is something desirable at all