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>

SaraVieira

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

      <section v-if="data">
          
      </section>
    </template>

SaraVieira

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

      <section v-if="data">
          <ul>
            <li :key="name.id" v-for="name in data.allNameses" >
              {{name.name}}

SaraVieira

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

      <section v-if="data">
          <ul>
            <li :key="name.id" v-for="name in data.allNameses" >
              {{name.name}}