A Practical Guide to GraphQL: From the Client Perspective/

...

/

Implementing the Issues Feature: Client-Side Filter

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.

Press + to interact
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.

Press + to interact
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.

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

The issueState ...