Skip to content

Instantly share code, notes, and snippets.

View malgamves's full-sized avatar

Daniel Madalitso Phiri malgamves

View GitHub Profile
@malgamves
malgamves / BookItem.vue
Created October 17, 2018 21:06
Files to add a GraphQL to a Vue App
<template>
<div>{{book.name}} by {{book.author}}</div>
</template>
<script>
export default {
name: 'BookItem',
props: ['book']
}
</script>
@malgamves
malgamves / main.js
Created October 17, 2018 21:33
Vue GraphQL Main JavaScript file
// 1
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import Vue from 'vue'
// 2
import VueApollo from 'vue-apollo'
import App from './App'
@malgamves
malgamves / App.vue
Created October 17, 2018 21:39
Vue GraphQL App.vue file
<template>
<div id="app" class="background">
<div >
<h1> Books I've Read</h1>
<book-list></book-list>
</div>
</div>
</template>
<script>
@malgamves
malgamves / App.vue
Created October 26, 2018 13:07
App.vue with the Modal and buttons
<template>
<div id="app" class="background">
<div >
<h1> Books I've Read</h1>
<book-list></book-list>
<br>
<button
type="button"
class="btn"
@click="showModal"
@malgamves
malgamves / graphql.js
Created October 26, 2018 14:23
File containing GraphQL operations
import gql from 'graphql-tag'
export const ALL_BOOKS_QUERY = gql`
query books {
books {
id
author
name
}
}
@malgamves
malgamves / Modal.vue
Last active October 26, 2018 15:04
Vue.js Modal
<script>
import { ADD_BOOK_MUTATION } from "../constants/graphql";
export default {
name: "modal",
data: () => ({
author: '',
name: '',
}),
methods: {
@malgamves
malgamves / main.js
Created May 4, 2019 14:57
Main.js file for a Realtime Vue App using GraphQL
import { ApolloClient } from 'apollo-client'
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import App from './App'
@malgamves
malgamves / BarChart.js
Created May 4, 2019 15:12
Chart.js BarChart Template
// CommitChart.js
import { HorizontalBar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: HorizontalBar,
mixins: [reactiveProp],
props: {
chartData: {
import gql from 'graphql-tag'
export const ADD_VOTE_MUTATION = gql`
mutation updateVotes($id: Int!) {
update_characters(where: {id: {_eq: $id}},
_inc: {votes: 1}) {
affected_rows
}
}
`;
@malgamves
malgamves / App.vue
Last active May 5, 2019 20:07
App.vue for a realtime Vue App using GraphQL
<template>
<div id="app">
<div class="container">
<div class="row">
<div class="column">
<h2>Who Might Die ⚔️</h2>
</div>
<div class="column">
<h2
v-if="loading"