Fetching Data from Movie APIs

Step 1: Switching to TMDB and Getting an API Key

First things first, we need access to the TMDB API. Like most public APIs, it requires a free API key to track usage and prevent abuse.

The process involves signing up on their website. The video below provides a complete walkthrough.

Once you have your key, you're ready to start making requests!

Step 2: Understanding the TMDB Search Endpoint

Before writing code, it's crucial to understand how the API works. We need to know the correct URL, what parameters to send, and what the data we get back will look like. The official TMDB documentation is the best place for this.

From the documentation, we learn two critical things:

1. The Endpoint URL: The base URL for a movie search is https://api.themoviedb.org/3/search/movie.
2. Required Parameters: We need to add our api_key and a query (the movie title we're searching for) to the URL. A full request will look like this:
   https://api.themoviedb.org/3/search/movie?api_key=YOUR_KEY&query=Jack+Reacher
3. The Response Structure: The API returns a JSON object. The actual list of movies is an array located in the results property of that object. This is a key difference from the OMDb API, which used a property called Search.

Step 3: Refactoring Your Data Fetching Logic

Now we can update the getMovieRequest function in your App.js file. We'll replace the OMDb URL with the new TMDB URL and adjust our code to handle the new response structure. The async/await syntax you're already familiar with is perfect for this.

The following resource provides a clear example of implementing a search bar with the TMDB API. We'll adapt its logic to fit our existing fetch-based approach.

Let's refactor your getMovieRequest function in App.js. It should now look like this:

// In App.js

// Don't forget to import useState and useEffect from React
import { useState, useEffect } from 'react';

// ... other components

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    
    // Store your TMDB API key here
    const TMDB_API_KEY = 'YOUR_TMDB_API_KEY'; // <-- PASTE YOUR KEY HERE

    const getMovieRequest = async (query) => {
        if (!query) {
            setMovies([]);
            return;
        }

        const url = `https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${query}`;

        try {
            const response = await fetch(url);
            const responseJson = await response.json();

            if (responseJson.results) {
                setMovies(responseJson.results);
            }
        } catch (error) {
            console.error("Failed to fetch movies:", error);
        }
    };

    // This useEffect hook will trigger the API call whenever searchValue changes.
    // If you implemented debouncing in the last lesson, your logic will be
    // slightly different, but the getMovieRequest function itself remains the same.
    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        // Your JSX, including the SearchBox component
        // Make sure SearchBox updates the `searchValue` state
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            {/* The MovieList component will be used in the next lesson */}
            {/* <div className='row'>
                <MovieList movies={movies} />
            </div> */}
        </div>
    );
};

export default App;

Key changes to note:

• The url now points to the TMDB search endpoint.
• We use a template literal to inject your new TMDB_API_KEY and the query.
• Crucially, we now check for responseJson.results and call setMovies(responseJson.results).

With this change, the debounced handler you built in the previous lesson will now call this updated function. Your application is now fetching data from TMDB! You won't see anything on the screen yet, but you can confirm it's working by using your browser's developer tools. Open the "Components" tab in React DevTools, select your App component, and watch the movies state array populate with data as you type in the search bar.

Conclusion

Fantastic work! You have successfully upgraded your application's data layer. This is a common task for a web developer: integrating with a third-party API and adapting your code to its specific requirements.

Key Takeaways:

• API Selection: You learned why choosing the right API (like TMDB) is important for building feature-rich applications.
• API Integration: You've gone through the full process of getting an API key, reading the documentation to find the correct endpoint, and constructing a valid request URL.
• Code Refactoring: You successfully refactored your existing data-fetching function to work with a new API and a different data structure, a practical skill you'll use constantly.

You are now fetching a rich set of movie data based on user queries. In our next lesson, "Display fetched data in a grid of movie cards, passing data via props," we will finally render this data to the screen, bringing our movie search application to life.