Making several API requests at once?

Question

I'm building something in React that makes an fetch call to a Movie API and displays the list of movies for the user.

For some reason this specific fetch call provides really basic results about each movie in the list. But there's a different fetch that provides a lot of details on a specific movie.

Is there a way to make the initial API call (for the list), at the same time as making the other calls (details for each movie), so the user sees more details from the search?

EDIT:

handleSubmitMovie() { //This returns the list of 10 movies.
if (this.state.inputTitle) { //If the user has input something.
    fetch(
        url + `/` +
        // searchParam + this.state.inputTitle + 
        `?s=${this.state.inputTitle}` +
        `&type=${this.state.selectType}` +
        `&page=${this.state.currPage}` +
        `&apikey=` + apiKey
        )
      .then(res => {
        if(res.ok) { //If API call is successful, return JSON file.
            return res.json();
        } else { //Else throw an Error.
            throw Error(`Request rejected with status ${res.status}`);
        }
      })
      .then(data => { //JSON file is represented by data.
            if (data.Response === "True") { //If matching movie(s) were found.
                for (let x=0; x < data.Search.length; x++) { //Runs for each record returned.
                    this.fullMovieSummary(data.Search[x].imdbID); //Calls fullMovieSummary with current record's imdbID.
                }

                this.setState({
                    moviesList: data
                })
            } else { //Else no matching movie(s) were found.
                this.setState({
                    moviesList: '',
                    movieData: ''
                })
            }
          })
          .catch(console.error);
    } else { //Else the user has input nothing.
        this.setState({
            moviesList: '',
            movieData: ''
        })
    }
}


fullMovieSummary(currMovieID) { //This provides full details on a single movie.
    fetch(
    url + `/` +
    `?i=${currMovieID}` +
    `&apikey=` + apiKey
    )

    .then(res => {
        if(res.ok) { //If API call is successful, return JSON file.
            return res.json();
        } else { //Else throw an Error.
            throw Error(`Request rejected with status ${res.status}`);
        }
      })
    .then(data => { //JSON file is represented by data.
        if (data.Response === "True") { //If matching movie(s) were found.  
            this.setState(
                {
                    movieData:[...this.state.movieData, data]
                }
            )
        } else { //Else no matching movie(s) were found.
            this.setState({
                movieData: ''
            })
        }
      })
    .catch(console.error);
}

Yes, make two separate calls, and update the DOM as they come back, not sure what you're having trouble with. Did you try it? Show what you have done and which part you're having a difficult time with. (by the way, not the serial downvoter) — Ruan Mendes, May 03 '19 at 20:14
Will need to upload later, I'm not 100% sure how to make a secret API file for CodeSandbox. I've added code above. When I log things to console it seems like both calls are made properly and passed down through the components. But when I try to access any of the data from the second request it crashs and says "Cannot read property 'Plot' of undefined." — Adam Weiler, May 03 '19 at 21:19

score 1 · Answer 1 · answered May 03 '19 at 21:33

It is not possible without changing the API, or implementing your own. I've done similar work by adding a graphql API to my app that does the querying on the server. Graphql was designed for this specific purpose, querying multiple endpoints in one network request. In my suggested implementation it doesn't eliminate the need for multiple requests, but moves those multiple requests to the server so that they're transparent to the front end.

Let's suppose your movie api has 2 endpoints:

GET /movies/   // list all the movies names, year released, and rotten tomatoes score
GET /movie/details?{movie}   // get the details about one movie in particular

You could get this data using a single network request from the frontend using a graphql query like this one

query {
  movie {
    name
    score
    released
    details {
        starring
        director
        producer
        quotes
        trivia
    }
  } 
}

Exactly how to implement graphql on your particular backend is beyond the scope of this discussion, but essentially you need a resolver that will query the two endpoints, and stitch them together in a single response. I want to be as clear as I can that you still have 2 network requests happening in this model (3 actually counting the one made by the client) but only one request depends on your users network connection. The other 2 happen at the server level. This makes graphql ideal for bandwidth limited situations and situations where your app depends on many APIs / Endpoints

If you're interested, I suggest you checkout their website

Is it possible to use Async/Await? To make the first request, wait and build up the array, make the additional request(s), wait and build up that array, then set state? — Adam Weiler, May 06 '19 at 23:56

score 0 · Answer 2 · answered May 03 '19 at 20:51

If you don't know what items are going to be in the list, you won't be able to make the detailed api request until you have already made the request for the list.

It's hard to tell, but I think what you want to do is take the return value of the list fetch, and loop through it and request the detailed information for each entry. lmk if that's helpful, or if you've updated to provide more info on the issue.

Making several API requests at once?

2 Answers2