SurbhiKatariya

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

SurbhiKatariya

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)

SurbhiKatariya

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

// set authorization header to authenticate the request using apollo link, it is optional.
/*
  const authMiddleware = new ApolloLink((operation, forward) => {
  const token = 'cllHNFlaZkpXbg64Qzh0Z3VJT2FOdz09'
  operation.setContext({
    headers: {

SurbhiKatariya

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

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

SurbhiKatariya

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

SurbhiKatariya

<script>
export default {
  data () {
    return {
      userList: [],
      isLoading: false
    }
  },
  created () {
    const vm = this

SurbhiKatariya

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