CardDeck.jsx

import React, { Component, Fragment } from "react";
import { shuffle } from "lodash";
import memoize from "memoize-one";
import CardItem from "./CardItem";

export default class CardDeck extends Component {
  state = {
    index: 0
  };

  shuffle = memoize(array => shuffle(array));

  onGoToNext = () => this.setState({ index: this.state.index + 1 });

  render() {
    const shuffledCards = this.shuffle(this.props.cards);
    const item = shuffledCards[this.state.index];

    if (this.state.index >= shuffledCards.length) {
      return (
        <div>
          <h1>Finished</h1>
        </div>
      );
    } else {
      return (
        <Fragment>
          <h1>{item.front}</h1>
          <h1>{item.back}</h1>
          {shuffledCards.map(card => (
            <CardItem key={card.id} card={card} />
          ))}
          <p>
            <button onClick={this.onGoToNext}>Next</button>
          </p>
        </Fragment>
      );
    }
  }
}

Cards.jsx

import React, { Component, Fragment } from "react";
import CardDeck from "./CardDeck";

const CARDS_QUERY = gql`
  query CardsQuery($id: ID!) {
    ...
  }
`;

export default class Cards extends Component {
  render() {
    let { id } = this.props.match.params;
    id = parseInt(id);

    return (
      <Query query={CARDS_QUERY} variables={{ id }}>
        {({ data, error, loading }) => {
          if (loading) {
            return <Loading />;
          }
          if (error) {
            return <Error />;
          }

          return <CardDeck cards={data.deck.cards} />;
        }}
      </Query>
    );
  }
}