How i fetch multiple data collections with API?

Discord Q&A strapi-questions
1

I have created code for fetch a collection data. But now i need to fetch more than one collection data. here the code.

`import { useEffect, useState }from ‘react’
const useFetch = (url) => {
const [data, setData]= useState(null)
const [error, setError]= useState(null)
const [loading, setLoading]= useState(true)

useEffect(() => {
    const fetchData = async () =>{
        setLoading(true)
        try{
            const res = await fetch(url)
            const json = await res.json()
            setData(json)
            setLoading(false)
        } catch (error){
            setError(error)
            setLoading(false)
        }
    } 
    fetchData()

}, [url])

return {loading, error, data}
}

export default useFetch `

This topic has been created from a Discord post (1268204490700357643) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

for example, i have Article, Member and Location collections. the code above only works on single collection. But now i need it works on more than one collection data.

3

Just to make sure if I understand your question correctly… You are developing a react application and you would like to know how you can multiple fetch requests? Or do you wish to create a single request to gather data from Article, Member and Location content types?

4

yeah, i don’t know how to gather data from those content types. if it can gathered by single request i would like to know how.

5

if you go to the terminal and execute strapi routes:list, do you see the endpoints of these content-types in that list? (I use yarn strapi routes:list, cause I haven’t installes strapi globally)

6

i do that and this appeared.

7

npm run strapi routes:list

8

okay, it’s works.

9

wait, i found how to solve this

10

Don’t forget to update the permissions in the admin panel!

11

yes, thank you so much. i’ll write the solutions after it’s done

12 
const fetchRequest1 = fetch('https://api.example.com/data1');
const fetchRequest2 = fetch('https://api.example.com/data2');

Promise.all([fetchRequest1, fetchRequest2])
  .then(responses => {
    const [response1, response2] = responses;
    // Process the responses
  })
  .catch(error => {
    // Handle any errors
  });
13

another option if you want it all in a single network request is to build a custom controller that returns all of the data you need in one call