Using crocks' getPathOr to build accessors for GraphQL query results

graphql-result-accessors.js

import { ApolloQuery, html, customElement } from '@apollo-elements/lit-apollo';
import query from './awesome-rob.graphql'; //use a build transform
import getPathOr from 'crocks/helpers/getPathOr';

const getUserBestFriend = getPathOr({}, ['me', 'friends', 0]);

@customElement('awesome-rob)
class AwesomeRob extends ApolloQuery {
  query = query;
  render() {
    const { name, picture, role } = getUserBestFriend(this.data);
    return html`
      <article>
        <cool-badge icon="${role}">
          <h2 id="name">${name}</h2>
        </cool-badge>
        <img src="${picture}" aria-labelledby="name"/>
      </article>
    `;
  }
}