react fetch data from multiple apis with async await and hooks

Question

I am currently fetching data from one endpoint. I want to store another api endpoints data in a state variable in the onload function. However I am not to sure how to fetch multiple end points.

the second end point which I need to call:

'/api/get_all_test_types'

This shows the code used to fetch one end point

useEffect(() => {
        async function onLoadCreateUnitTests() {
          
          const results = await get('get_tables_autocomplete/b', user.user)
    
          autoComplete.setTablesAutoComplete(results)
    
        }
    
        onLoadCreateUnitTests()
    
      }, [])

MarkCBall Code:

 useEffect(() => {
    async function onLoadCreateUnitTests() {

      const results = await get('get_tables_autocomplete/b', user.user)
      const resultsAllTestTypes = await get('/api/get_all_test_types')
      autoComplete.setTablesAutoComplete(results)
      setAllTestTypes(resultsAllTestTypes)
  

    }

    onLoadCreateUnitTests()

  }, [])

Error

Dharman · Accepted Answer · 2020-08-13 04:00:09Z

1

const results = await get('get_tables_autocomplete/b', user.user)
const resultsAllTestTypes = await get('/api/get_all_test_types')
autoComplete.setTablesAutoComplete(results)
setAllTestTypes(resultsAllTestTypes)

Alternatively, you could run these two queries at the same time like so. This will complete as soon as the slower of the two queries completes.

const getPromises = [
    await get('get_tables_autocomplete/b', user.user),
    await get('/api/get_all_test_types')
]
const getResponses = Promise.all(getPromises)
autoComplete.setTablesAutoComplete(getResponses[0])
setAllTestTypes(getResponses[1])

You could get more sophisticated with callbacks to that you start populating your as soon as the first get comes back like so:

get('get_tables_autocomplete/b', user.user).then(autoComplete.setTablesAutoComplete)
get('/api/get_all_test_types').then(setAllTestTypes)

edited Aug 13, 2020 at 4:00

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 13, 2020 at 3:54

MarkCBall

2391 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user11657234 Over a year ago

Thanks for the indepth! I am using the first section of your code, however I am getting a setAllTestTypes is not defined error? The code I have used is updated in my answer, maybe I have written it in correctly?

user11657234 Over a year ago

Oh ignore, me, I need state to store the test type data!

MarkCBall Over a year ago

Understood! You need to set up some some state for the value to live. I assume you are comfortable with react hooks. Try a line like const [allTestTypes, setAllTestTypes] = useState() to create a place for that data to "live in" You can then do something like <button onClick={()=>console.log(allTestTypes)}>click me</button> to view what you have in that new piece of state you just created.

Louay Al-osh · Accepted Answer · 2020-08-13 03:54:39Z

0

Simply you can do multiple await inside one async function

 async function onLoadCreateUnitTests() {
          
   const results = await get('get_tables_autocomplete/b', user.user);
   const allTestTypes = await get('/api/get_all_test_types', user.user);
    
   autoComplete.setTablesAutoComplete(results);

   setAllTestType(allTestTypes); // recommend you to have some state so you can set it here
    
 }

answered Aug 13, 2020 at 3:54

Louay Al-osh

3,43721 silver badges31 bronze badges

Collectives™ on Stack Overflow

react fetch data from multiple apis with async await and hooks

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related