Skip to content

Instantly share code, notes, and snippets.

Avatar

SurbhiKatariya

View GitHub Profile
View 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}}
@SurbhiKatariya
SurbhiKatariya / Users.vue
Last active Apr 4, 2020
Fetch data with query
View Users.vue
<script>
export default {
data () {
return {
userList: [],
isLoading: false
}
},
created () {
const vm = this
@SurbhiKatariya
SurbhiKatariya / Users.vue
Last active Apr 4, 2020
Make graphql query
View Users.vue
<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
SurbhiKatariya / main.js
Last active Apr 4, 2020
Add apolloProvider in vue instance
View main.js
// Create the apollo client
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache(),
connectToDevTools: true
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})
@SurbhiKatariya
SurbhiKatariya / main.js
Last active Apr 9, 2020
Create custom link
View main.js
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: {
View main.js
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
SurbhiKatariya / Users.vue
Last active Apr 9, 2020
Fetch users list from mock API using vue-apollo
View 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}}
You can’t perform that action at this time.