Implementing the Issues Feature: Setup

In the previous lessons, we have implemented most of the common Apollo Client features in our React application. Now we can start implementing extensions for the application on our own. This lesson showcases how a full-fledged feature can be implemented with Apollo Client in React.

So far, you have dealt with GitHub repositories from organizations and your account. This will take us one step further, fetching GitHub issues that are made available using a list field associated with a repository in a GraphQL query. However, this lesson doesn’t only show you how to render a nested list field in your React application.

The foundation will be rendering the list of issues. You will implement client-side filtering with plain React to show opened, closed, or no issue. Finally, you will refactor the filtering to server-side filtering using GraphQL queries. We will only fetch the issues by their state from the server rather than filtering the issue’s state on the client-side. Implementing pagination for these issues will be your exercise.

First, we will render a new component called Issues in our RepositoryList component. This component takes two props that are used later in a GraphQL query to identify the repository from which you want to fetch the issues.