Guillaume Chau Akryum
☮️
Akryum
/ PostUpvoter.vue
Created
September 22, 2016 08:21
Apollo mutation example in a Vue component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import gql from 'graphql-tag'; | |
| // GraphQL Mutation with one parameter | |
| const upvoteMutation = gql` | |
| mutation upvotePost($postId: Int!) { | |
| upvotePost(postId: $postId) { | |
| id | |
| votes | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| export default { | |
| created() { | |
| this.$apollo.watchQuery({ | |
| /* options */ | |
| }).then(data => { | |
| console.log(data); | |
| }); | |
| }, | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| apollo: { | |
| posts: { | |
| query: postsQuery, | |
| loadingKey: 'loading', | |
| // Polling query | |
| pollInterval: 300, // ms | |
| }, | |
| }, |
Akryum
/ PostList.vue
Last active
November 13, 2019 02:28
Example Vue component using Apollo and GraphQL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import gql from 'graphql-tag'; | |
| // GraphQL query | |
| const postsQuery = gql` | |
| query allPosts { | |
| posts { | |
| id | |
| title | |
| votes |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
NewerOlder