SaraVieira

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH=/Users/flyingunicornaway/.oh-my-zsh

# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME=""

SaraVieira

import App from './components/app';
import { h, render } from 'preact';
import { default as renderToString } from 'preact-render-to-string';
import { ServerStyleSheet } from 'styled-components'

if(typeof window === undefined) {
    const sheet = new ServerStyleSheet()
    const html = renderToString(sheet.collectStyles(<App />))
    const styleTags = sheet.getStyleTags() // or sheet.getStyleElement()
}

SaraVieira

Keybase proof

I hereby claim:

• I am saravieira on github.
• I am nikkitaftw (https://keybase.io/nikkitaftw) on keybase.
• I have a public key ASB1DL0yoOuI60I60pIccC9ESBLbyLD4DBoU3UpRqj4ZsAo

To claim this, I am signing this object:

SaraVieira

import Vue from "vue";
import App from "./App";
import ApolloClient from "apollo-boost";
import VueApollo from "vue-apollo";

SaraVieira

const client = new ApolloClient({
  uri: "https://api.graph.cool/simple/v1/cjexem1he3let0153tpc5ftu1"
});

const apolloProvider = new VueApollo({
  defaultClient: client
});

Vue.use(VueApollo);

SaraVieira

new Vue({
  el: "#app",
  components: { App },
  provide: apolloProvider.provide(),
  template: "<App/>"
});

SaraVieira

<template>
  <div id="app">
    <h1 class="f4 bold center mw5">Add A Person</h1>
    <Form/>
    <h1 class="f4 bold center mw5">Names</h1>
    <Names />
  </div>
</template>

<script>

SaraVieira

import { gql } from "apollo-boost";

export const GET_NAMES = gql`
  query {
    allNameses {
      id
      name
    }
  }
`;

SaraVieira

<template>
  <ApolloQuery :query="query">
    <template slot-scope="{ result: { loading, error, data } }">
        
    </template>
  </ApolloQuery>
</template>

<script>
import { GET_NAMES } from "../queries.js";

SaraVieira

<template>
  <ApolloQuery :query="query">
    <template slot-scope="{ result: { loading, error, data } }">
      <div v-if="loading">Loading...</div>
      
      <div v-else-if="error">An error occured</div>

      <div v-if="data">
          
      </div>