AI Features
Home
Courses
A Practical Guide to GraphQL: From the Client Perspective

Implementing the Issues Feature: Client-Side Filter

Here we learn how to enhance the Issue feature with client-side filtering.

We'll cover the following...

First, let’s introduce our three states as enumeration next to the Issues component. The NONE state is used to show no issues; otherwise, the other states are used to show open or closed issues.

const ISSUE_STATES = {
  NONE: 'NONE',
  OPEN: 'OPEN',
  CLOSED: 'CLOSED',
};

Second, let’s implement a short function that decides whether it is a state to show the issues or not. This function can be defined in the same file.

const isShow = issueState => issueState !== ISSUE_STATES.NONE;

Third, the function can be used for conditional rendering, to either query the issues and show the IssueList, or to do nothing. It’s not clear yet where the issueState ...