GraphQL organizing your REST APIs

This is a simple web app that displays a list of movies with the vilain and heroes associated with it. When clicking on the movie it will open up the trailler on another tab.

It seems pretty simple, but the idea here is to demonstrate how you can fetch related data from your REST APIs easily using GraphQL. The step-by-step you can find here.

Feel free to clone and play around with it.

To see it working locally, just follow the following steps 👇👇

1 - Start the REST API Server

In the project directory, you can run:

cd rest-api-server

yarn install

yarn start

It starts the REST API server
Open http://localhost:3000 to access the endpoints on the browser:

• /movies
• /heroes/1
• /villains/1

2 - Start the GraphQL Server

It is an ApolloServer that uses as data-source our REST endpoints. In the project directory, you can run:

cd graphql-server

yarn install

yarn start

It starts the GraphQL server
Open http://localhost:4000 to access the GraphQL playground on the browser. Try to copy and paste the following query there:

query Movies {
    getMovies {
        name
        villain {
            name
        }
        heroes {
            name
        }
    }
}

3 - Start the Frontend Application

To start the React app you can run:

cd react-web-app

yarn install

yarn start

Launches the react web app.

Don't forget to start the servers first 😅.