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}}

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 v-if="data.allNameses.length">
            <li :key="name.id" v-for="name in data.allNameses" >
              {{name.name}}

SaraVieira

<template>
  <ApolloQuery :query="query" :variables="{ name: 'vue' }">
    <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 v-if="data.allNameses.length">
            <li :key="name.id" v-for="name in data.allNameses" >
              {{name.name}}

SaraVieira

<template>
  <form v-on:submit.prevent="onSubmit">
    <div class="measure">
      <label htmlFor="name">
        Name
      </label>
      <input
        id="name"
        type="text"
        required

SaraVieira

aside {
    background: white;
}

header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

SaraVieira

<script>
  import { GET_NAMES, ADD_NAME } from "../queries";
  export default {
    name: "Form",
    data() {
      return {
        person: ""
      };
    },
    methods: {

SaraVieira

<script>
  import { GET_NAMES, ADD_NAME } from "../queries";
  export default {
    name: "Form",
    data() {
      return {
        person: ""
      };
    },

SaraVieira

<script>
  import { GET_NAMES, ADD_NAME } from "../queries";
  export default {
    name: "Form",
    data() {
      return {
        person: ""
      };