Search⌘ K
Home
Courses
A Practical Guide to GraphQL: From the Client Perspective

Implementing the Issues Feature: Client-Side Filter

Explore how to add client-side filtering to an issues feature using React and Apollo. Learn to manage local state for toggling issue visibility, implement conditional rendering, and update components to handle state transitions for dynamic issue listing.

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.

Node.js
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.

Node.js
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 property comes from.

C++
const Issues = ({ repositoryOwner, repositoryName }) => (
  <div className="Issues">
    {isShow(issueState) && (
      <Query ... >
        ...
      </Query>
    )}
  </div>
);

The issueState ...