Starwars Apollo GraphQL

Short Description

In this project, I developed a React-based application that fetches and lists Star Wars data via GraphQL, featuring a detail page and a pagination flow.

Problem

REST-based data fetching examples can lead to unnecessary data loading and complex request structures. In this project, I focused on establishing a cleaner data flow by using GraphQL to fetch only the required fields.

Solution

I built the application using React, TypeScript, and Apollo Client. It fetches a paginated list of characters from the SWAPI GraphQL endpoint, and on the detail page, it retrieves the selected character's film, species, and planet information through separate queries. I managed page transitions with React Router and controlled query states through loading and error states.

Result

The outcome is a small but clean example application that clearly demonstrates GraphQL query logic. The project showcases the usage of Apollo Client, paginated queries, and a component-based data fetching flow in a practical manner.

Technologies

React, TypeScript, Apollo Client, GraphQL, React Router DOM, Vite, Tailwind CSS

Setup