SHARE
TWEET

Untitled

a guest May 19th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. A widget defines the data it needs from backend. A Graphl Query can be exported for re-use.
  2.  
  3. ### GraphQL Query
  4.  
  5. ```javascript
  6. export const GET_PROJECTION = `{
  7.   user(id: xxx) {
  8.     firstName
  9.     lastName
  10.   }
  11.   projection {
  12.     portfolioTimeLine
  13.     portfolioValue
  14.     allocation
  15.     fees
  16.     contributions            
  17.   }
  18. }`
  19. ```
  20.  
  21. ```javascript
  22. //Widget
  23. const Projection = ({ ...props }) => (
  24.   <Query query={GET_PROJECTION}>
  25.     {({ loading, error, data }) => {
  26.       if (loading) return 'Loading...';
  27.       if (error) return `Error! ${error.message}`;
  28.       const {
  29.         firstName,
  30.         lastName,
  31.         portfolioTimeLine,
  32.         portfolioValue,
  33.         allocation,
  34.         fees,
  35.         contributions
  36.       } = data;
  37.       return (
  38.         <Card>
  39.           ...Widget content
  40.         </Card>
  41.       );
  42.     }}
  43.   </Query>
  44. );
  45.  
  46. export default Projection;
  47. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top