Example using Compositor Lab, x0 and Graphql

App.js

import React from 'react'

const URL = 'https://api.graph.cool/simple/v1/cj90efsm60hka01721jcnbn53'

import { request } from 'graphql-request'

import { ThemeProvider } from 'glamorous'
import theme from './theme'

import {
  H1,
  Flex,
  Font,
  Profile,
  Container
} from './components'

const App = props =>
  <ThemeProvider theme={theme}>
    <Font>
      <Container>
        <H1 mb={5}>Compositor Team</H1>

        <Flex
          children={props.team.map(t =>
            <Profile
              avatar={t.avatarUrl}
              name={t.name}
              location={t.location}
            />
          )}
        />
      </Container>
    </Font>
  </ThemeProvider>

App.getInitialProps = async () => {
  const query = `{
    allTeamMembers {
      avatarUrl
      location
      name
    }
  }`

  const { allTeamMembers } = await request(URL, query)

  return { team: allTeamMembers }
}

export default App

lab.json

{
  "name": "graphql-example",
  "library": "glamorous",
  "components": [
    {
      "name": "Avatar",
      "type": "img",
      "props": {
        "w": 100,
        "borderRadius": 9999,
        "borderWidth": 1,
        "borderColor": "lightgray"
      },
      "style": {
        "display": "block",
        "maxWidth": "100%",
        "height": "auto"
      },
      "examples": [
        "<Avatar src='https://compositor.io/images/jxnblk.png' />"
      ],
      "system": [
        "borderRadius",
        "borderWidth",
        "borderColor"
      ]
    },
    {
      "name": "H3",
      "type": "h3",
      "props": {},
      "style": {},
      "examples": [
        "<H3>Hello</H3>"
      ]
    },
    {
      "name": "H6",
      "type": "h6",
      "props": {
        "f": 2,
        "my": 0
      },
      "style": {
        "textTransform": "uppercase",
        "letterSpacing": "2px"
      },
      "examples": [
        "<H6>Hello</H6>"
      ],
      "system": []
    },
    {
      "name": "Profile",
      "imports": [
        "Avatar",
        "H3",
        "H6",
        "Div"
      ],
      "jsx": "<Div text='center'>\n  <Avatar\n    m='auto'\n    src={props.avatar}\n  />\n  <H3\n    mt={2}\n    mb={0}\n    children={props.name}\n  />\n  <H6\n    children={props.location}\n  />\n</Div>",
      "examples": [
        "<Profile\n  avatar='https://compositor.io/images/jxnblk.png'\n  name='Brent Jackson'\n  location='nyc'\n/>"
      ],
      "system": []
    },
    {
      "name": "Div",
      "type": "div",
      "props": {
        "text": "left"
      },
      "style": {
        "textAlign": "${props.text}"
      },
      "examples": [
        "<Div>Hello</Div>"
      ],
      "system": []
    },
    {
      "name": "Font",
      "type": "div",
      "props": {},
      "style": {
        "fontFamily": "${props.theme.fonts[0]}"
      },
      "examples": [
        "<Font>Hello</Font>"
      ],
      "system": []
    },
    {
      "name": "H1",
      "type": "h1",
      "props": {},
      "style": {},
      "examples": [
        "<H1>Hello</H1>"
      ]
    },
    {
      "name": "Flex",
      "type": "div",
      "props": {},
      "style": {
        "display": "flex",
        "justifyContent": "space-between"
      },
      "examples": [
        "<Flex>Hello</Flex>"
      ],
      "system": []
    },
    {
      "name": "Container",
      "type": "div",
      "props": {
        "p": 4
      },
      "style": {
        "maxWidth": "64rem",
        "margin": "auto"
      },
      "examples": [
        "<Container>Hello</Container>"
      ],
      "system": []
    }
  ]
}

package.json

{
  "name": "x0-graphql-example",
  "scripts": {
    "start": "lab --pkg -wd components | x0 dev App -s"
  },
  "dependencies": {
    "@compositor/lab": "^1.0.0-32",
    "@compositor/x0": "^2.0.0-8",
    "glamor": "^2.20.40",
    "glamorous": "^4.10.0",
    "graphql-request": "^1.4.0",
    "styled-system": "^1.0.8"
  }
}

theme.json

{
  "fonts": [
    "-apple-system, BlinkMacSystemFont, sans-serif"
  ],
  "space": [
    0,
    4,
    8,
    16,
    32,
    64,
    128,
    256
  ],
  "fontSizes": [
    12,
    14,
    16,
    20,
    24,
    32,
    48,
    64,
    72,
    96
  ],
  "colors": {
    "black": "#000",
    "blue": "#07c",
    "lightgray": "#eee"
  }
}