Fetch users list from mock API using vue-apollo

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const httpLink = new HttpLink({
  uri: 'https://api.graph.cool/simple/v1/ciyz901en4j590185wkmexyex'
})

/*
  const authMiddleware = new ApolloLink((operation, forward) => {
  const token = 'cllHNFlaZkpXbg64Qzh0Z3VJT2FOdz09'
  operation.setContext({
    headers: {
      authorization: `Bearer ${token}`
    }
  })
  return forward(operation)
})
*/

const link = ApolloLink.from([
  // authMiddleware,
  httpLink
])

// Create the apollo client
const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

// VueApollo setup
const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
  router,
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

Users.vue

<template lang="pug">
  .container
    div(v-if="isLoading") Loading......
    .user-table(v-if="!isLoading")
      .table-row.table-header
        div User Id
        div User Name
        div User Email
      .table-row.table-data(:key="index" v-for="(user, index) in userList")
        div {{user.id}}
        div {{user.name}}
        div {{user.email}}
</template>

<script>
import gql from 'graphql-tag'
const GET_USER_DETAILS = gql`
query getUsers($character: String!) {
  allUsers(orderBy: name_ASC, filter: {email_contains: $character}) {
    id,
    name,
    email
  }
}
`
export default {

  data () {
    return {
      userList: [],
      isLoading: false
    }
  },
  
  created () {
    const vm = this
    vm.getUserList({ character: '@' })
  },
  
  methods: {
    /**
    * fetch users using apollo client
    */
    getUserList (variables = {}) {
      const vm = this
      vm.isLoading = true
      vm.$apolloProvider.defaultClient
        .query({
          query: GET_USER_DETAILS,
          variables: {
            ...variables
          }
          // fetchPolicy: 'cache-and-network'
        })
        .then(result => {
          vm.userList = result.data.allUsers
          vm.isLoading = result.data.loading
        })
        .catch(error => {
          // write your error message here
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 100px;
  color: white;
}
.user-table {
  border-radius: 30px;
  overflow: auto;
  box-shadow: 5px 10px 18px #888888;
  .table-row {
    display: flex;
    align-items: center;
    padding-left: 100px;
    justify-content: space-around;
    &.table-header {
      height: 50px;
      font-size: 20px;
      font-weight: bold;
      background-color: #242E4C;
      color: white;
    }
    &.table-data {
      height: 70px;
      display: flex;
      color: #1c1439;
      background-color: white;
      border-bottom: 1px solid #cfd0e7;
    }
    div {
      width: 355px;
      text-align: left;
    }
  }
}
</style>