A widget defines the data it needs from backend. A Graphl Query can be exported for re-use.

### GraphQL Query

```javascript
export const GET_PROJECTION = `{
  user(id: xxx) {
    firstName
    lastName
  }
  projection {
    portfolioTimeLine
    portfolioValue
    allocation
    fees
    contributions
  }
}`
```

```javascript
//Widget
const Projection = ({ ...props }) => (
  <Query query={GET_PROJECTION}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;
      const {
        firstName,
        lastName,
        portfolioTimeLine,
        portfolioValue,
        allocation,
        fees,
        contributions
      } = data;
      return (
        <Card>
          ...Widget content
        </Card>
      );
    }}
  </Query>
);

export default Projection;
```