Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Stay home

Guillaume Chau Akryum

🏠
Stay home
View GitHub Profile
View designer.html
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<polymer-element name="my-element">
<template>
@Akryum
Akryum / main.js
Created Sep 21, 2016
vue-apollo configuration and app startup
View main.js
import Vue from 'vue';
import App from './App.vue';
import ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';
import VueApollo from 'vue-apollo';
// Create the apollo client
const apolloClient = new ApolloClient({
networkInterface: createNetworkInterface({
uri: 'http://localhost:8080/graphql',
transportBatching: true,
@Akryum
Akryum / PostList.vue
Last active Nov 13, 2019
Example Vue component using Apollo and GraphQL
View PostList.vue
<script>
import gql from 'graphql-tag';
// GraphQL query
const postsQuery = gql`
query allPosts {
posts {
id
title
votes
@Akryum
Akryum / PostList.vue
Created Sep 21, 2016
Polling vue-apollo query
View PostList.vue
apollo: {
posts: {
query: postsQuery,
loadingKey: 'loading',
// Polling query
pollInterval: 300, // ms
},
},
View App.vue
<script>
export default {
created() {
this.$apollo.watchQuery({
/* options */
}).then(data => {
console.log(data);
});
},
};
@Akryum
Akryum / PostUpvoter.vue
Created Sep 22, 2016
Apollo mutation example in a Vue component
View PostUpvoter.vue
<script>
import gql from 'graphql-tag';
// GraphQL Mutation with one parameter
const upvoteMutation = gql`
mutation upvotePost($postId: Int!) {
upvotePost(postId: $postId) {
id
votes
}
@Akryum
Akryum / PostList.vue
Last active Nov 1, 2016
Initialize data
View PostList.vue
// Local state
data: () => ({
// You can initialize the 'posts' data here
posts: [],
loading: 0,
}),
@Akryum
Akryum / subscriptions.js
Created Nov 1, 2016
GraphQL server subscriptions
View subscriptions.js
import { PubSub, SubscriptionManager } from 'graphql-subscriptions';
import schema from './schema';
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
schema,
pubsub,
setupFunctions: {
tagAdded: (options, args) => {
console.log(args);
View transition.js
const field = this._leaving ? 'leave' : 'enter'
const lastField = '_lastDuration_' + field
const duration = this.duration
const explicitDuration = parseDuration((
duration !== null &&
typeof duration === 'object' &&
duration[field]
) || duration)
const el = child.elm
@Akryum
Akryum / Demo.vue
Last active Feb 25, 2019
vue-responsive
View Demo.vue
<template>
<div>
<div v-if="$responsive.mobile">Mobile</div>
<div v-else-if="$responsive.tablet">Tablet</div>
<div v-else>Desktop</div>
</div>
</template>
You can’t perform that action at this time.