Skip to content

Instantly share code, notes, and snippets.

@SurbhiKatariya SurbhiKatariya/Users.vue
Last active Apr 9, 2020

Embed
What would you like to do?
Fetch users list from mock API using vue-apollo
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')
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.