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.

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

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

The issueState ...