Skip to content

Instantly share code, notes, and snippets.

@bennypowers
Created June 20, 2019 04:10
Show Gist options
  • Save bennypowers/359ff0d7aa4d453b9ff6dcda0b59ba99 to your computer and use it in GitHub Desktop.
Save bennypowers/359ff0d7aa4d453b9ff6dcda0b59ba99 to your computer and use it in GitHub Desktop.
Using crocks' getPathOr to build accessors for GraphQL query results
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>
`;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment