Comments (3)
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.
from axios-hooks.
https://github.com/simoneb/axios-hooks/issues
from axios-hooks.
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
from axios-hooks.
Related Issues (20)
- Release pending!
- Refetch "expression is not callable" HOT 2
- Why I'm getting 2 rendered using this hook, when component mounts? HOT 9
- Release pending!
- Prevent CanceledError and redundant HTTP calls for identical request data HOT 1
- Support for API polling HOT 1
- type error HOT 9
- Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) HOT 1
- How to configure SSR with NextJS? HOT 3
- "Uncaught runtime errors: Cannot read properties of undefined (reading 'data')" after upgrading to CRA 5.0.1 & Node 18 HOT 6
- Not usable within the US? HOT 1
- Error from a dynamically loaded uri HOT 3
- Release pending!
- Release pending!
- useAxios hook sending in 2 requests, the first is cancelled immediately HOT 3
- Release pending! HOT 3
- Release pending!
- Release pending!
- Type error: MouseEvent using refetch and provided example from docs HOT 2
- Still an issue with both `executeGet` and `execute` methods when executed manually HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from axios-hooks.