{"id":13748627,"url":"https://github.com/aruntk/polymer-apollo","last_synced_at":"2026-04-08T14:02:29.545Z","repository":{"id":57327201,"uuid":"69362956","full_name":"aruntk/polymer-apollo","owner":"aruntk","description":"🚀 Polymer Apollo Integration","archived":false,"fork":false,"pushed_at":"2018-08-21T23:24:58.000Z","size":92,"stargazers_count":78,"open_issues_count":6,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-22T16:58:45.724Z","etag":null,"topics":["apollo","apollo-client","apollo-query","polymer-apollo","polymer-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aruntk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-27T14:02:48.000Z","updated_at":"2023-08-08T12:42:47.000Z","dependencies_parsed_at":"2022-09-13T19:00:56.614Z","dependency_job_id":null,"html_url":"https://github.com/aruntk/polymer-apollo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fpolymer-apollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fpolymer-apollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fpolymer-apollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fpolymer-apollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aruntk","download_url":"https://codeload.github.com/aruntk/polymer-apollo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254030950,"owners_count":22002676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","apollo-client","apollo-query","polymer-apollo","polymer-components"],"created_at":"2024-08-03T07:00:45.989Z","updated_at":"2026-04-08T14:02:24.505Z","avatar_url":"https://github.com/aruntk.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Integration with other frameworks","Behaviors"],"sub_categories":["Uncategorized","GraphQL"],"readme":"\u003e Note: For Polymer 1.x checkout branch [1.x](https://github.com/aruntk/polymer-apollo/tree/1.x)\n\n# Polymer-Apollo\n\n\n[![Join the chat at https://gitter.im/aruntk/polymer](https://badges.gitter.im/aruntk/polymer.svg)](https://gitter.im/aruntk/polymer?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge) [![npm](https://img.shields.io/npm/v/polymer-apollo.svg) ![npm](https://img.shields.io/npm/dt/polymer-apollo.svg)](https://www.npmjs.com/package/polymer-apollo)\n\n[Polymer](https://www.polymer-project.org) [apollo](http://www.apollostack.com/) integration.\n\n## Examples\n\n[GitHunt-Polymer](https://github.com/aruntk/GitHunt-Polymer) - An example of a client-side app built with Polymer and Apollo Client.\n\n[NEWS App](https://github.com/aruntk/news) - A news app built using polymer-apollo\n\n[Polymer Apollo Frontpage App](https://github.com/aruntk/polymer-apollo-frontpage) - Polymer Apollo Hello World app\n\n[Polymer Apollo Meteor App](https://github.com/aruntk/polymer-apollo-meteor-demo) - Github api app using polymer-apollo meteor and [synthesis](https://github.com/meteorwebcomponents/synthesis)\n\n\n\n## Table of contents\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage in components](#usage-in-components)\n- [Queries](#queries)\n  - [Simple query](#simple-query)\n  - [Query with parameters](#query-with-parameters)\n  - [Advanced options](#advanced-options)\n  - [Refetch Query Example](#refetch-query)\n  - [Skip Query Example](#skip-query-example)\n  - [Reactive Query Example](#reactive-query-example)\n- [Fragments](#fragments)\n- [Mutations](#mutations)\n- [Subscriptions](#subscriptions)\n- [Pagination with `fetchMore`](#pagination-with-fetchmore)\n\n\n## Installation\n\n    npm install --save polymer-apollo apollo-client\n\n\n\n## Usage\n\n### Configuration\n\n```js\n//config.js\nimport ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';\n\n// Create the apollo client\nexport const apolloClient = new ApolloClient({\n  networkInterface: createNetworkInterface({\n    uri: 'http://localhost:8080/graphql',\n    transportBatching: true,\n  })\n});\n```\n\n### Usage in components\n\n```js\n//my-element.js\n// if you want the es5 compiled version use\n// import { PolymerApolloMixin } from 'polymer-apollo/es5';\nimport { PolymerApolloMixin } from 'polymer-apollo';\nimport { apolloClient } from './config.js';\n\nclass MyElement extends PolymerApolloMixin({apolloClient}, Polymer.Element) {\n    static get is() {\n        return 'my-element'\n    }\n\n    get apollo() {\n        // Apollo specific options\n    }\n    ...\n});\n```\n\nYou can access the [apollo-client](http://dev.apollodata.com/core/apollo-client-api.html) instance with `this.$apollo.client` in all your polymer components.\n\n\n### Queries\n\nIn the `apollo` object, add an attribute for each property you want to feed with the result of an Apollo query.\n\n#### Simple query\n\nUse `gql` to write your GraphQL queries:\n\n```js\nimport gql from 'graphql-tag';\n```\n\nPut the [gql](http://docs.apollostack.com/apollo-client/core.html#gql) query directly as the value:\n\n```js\nget apollo() {\n  return {\n    // Simple query that will update the 'hello' polymer property\n    hello: gql`{hello}`,\n  };\n}\n```\n\nDon't forget to initialize your property in your polymer component:\n\n```js\n//my-element.js\n...\nproperties : {\n    // Initialize your apollo data\n    hello: String,\n},\n...\n```\n\nServer-side, add the corresponding schema and resolver:\n\n```js\nexport const schema = `\ntype Query {\n  hello: String\n}\n\nschema {\n  query: Query\n}\n`;\n\nexport const resolvers = {\n  Query: {\n    hello(root, args, context) {\n      return \"Hello world!\";\n    },\n  },\n};\n```\n\nFor more info, visit the [apollo doc](http://dev.apollodata.com/tools/).\n\nYou can then use your property as usual in your polymer component:\n\n```html\n\u003c!--my-element.js--\u003e\n\u003cdom-module id=\"my-element\"\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"apollo\"\u003e\n    \u003ch3\u003eHello\u003c/h3\u003e\n    \u003cp\u003e\n      {{hello}}\n    \u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c/dom-module\u003e\n```\n\n#### Query with parameters\n\nYou can add variables (read parameters) to your `gql` query by declaring `query` and `variables` in an object:\n\nOptions can be computed properties or static. \n\nInitial values of variables should be given if options are computed, since polymer options wont be triggered if arguments are undefined, which maybe the case during first rendering.\n\neg \n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\nget apollo() {\n  return {\n    query1: {\n      query: someQuery,\n      // watches prop1 and prop2 changes\n      // you should either initialize values of prop1,prop2 == !undefined or \n      // set an initial value to variables property\n      variables: {\n        var1: 'blah',\n        var2: 'blah blah',\n      },\n      options: 'computedProp',\n    }\n  };\n}\ncomputeFn: function(prop1, prop2) {\n  return { variables: { var1: prop1, var2: prop2 + 10 } };\n}\n...\n```\n. In this graphql variables var1 and var2 change when the polymer properties prop1 and prop2 change (similar to computed feature);\n\n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\n// Apollo-specific options\nget apollo() {\n  return {\n    // Query with parameters\n    ping: {\n      // gql query\n      query: gql`query PingMessage($message: String!) {\n      ping(message: $message)\n    }`,\n      options: 'computedProp',\n      variables: {\n        message: '',\n      },\n    },\n  };\n}\ncomputedFn: function(prop1, prop2) {\n  return { variables: { message: `${prop1} ping...`} };\n}\n```\n\nIn the above example you can use the apollo `watchQuery` options in the property ping or in the computed function return, like:\n - `forceFetch`\n - `fragments`\n - `returnPartialData`\n - `pollInterval`\n - ...\n\nSee the [apollo doc](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\\.watchQuery) for more details.\n\nFor example, you could add the `forceFetch` apollo option like this:\n\n```js\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\n\nget apollo() {\n  // Query with parameters\n  return {\n    pingQuery: {\n    query: gql`query PingMessage($message: String!) {\n      ping(message: $message)\n    }`,\n    options: 'computedProp',\n    variables: {\n      message: 'blah',\n    },\n    skip: true,\n    // Additional options here. static.\n    forceFetch: true,\n  };\n  }\n}\ncomputedFn: function(prop1, prop2) {\n  // Additional options if added here becomes reactive\n  return {\n    variables: {\n      message: prop1,\n    },\n    skip: prop2,\n  };\n}\n```\n\nDon't forget to initialize your property in your polymer component.\n\n```js\n//my-element.js\n...\nstatic get properties() {\n    // Initialize your apollo data\n    ping: String,\n},\n...\n```\n\nServer-side, add the corresponding schema and resolver:\n\n```js\nexport const schema = `\ntype Query {\n  ping(message: String!): String\n}\n\nschema {\n  query: Query\n}\n`;\n\nexport const resolvers = {\n  Query: {\n    ping(root, { message }, context) {\n      return `Answering ${message}`;\n    },\n  },\n};\n```\n\nAnd then use it in your polymer component:\n\n```html\n\u003cdom-module id=\"my-element\"\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"apollo\"\u003e\n    \u003ch3\u003ePing\u003c/h3\u003e\n    \u003cp\u003e\n      {{ping}}\n    \u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c/dom-module\u003e\n```\n#### options\n\nOptions can be added in two ways - computed and static.\n\nFor computed options you may want to give initial values since \n\n\u003e computing function is not invoked until all dependent properties are defined (!== undefined). So each dependent properties should have a default value defined in properties (or otherwise be initialized to a non-undefined value) to ensure the property is computed.\n\nfrom polymer doc https://www.polymer-project.org/1.0/docs/devguide/observers#computed-properties\n\ncomputed eg.\n\n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\nget apollo() {\n  return {\n  // Query with parameters\n  ping: {\n    query: gql`query PingMessage($message: String!) {\n      ping(message: $message)\n    }`,\n    options: 'computedProp',\n    // Additional options here. static.\n    forceFetch: true,\n  };\n  }\n}\ncomputedFn: function(prop1, prop2) {\n  // Additional options if added here becomes reactive\n  return {\n    variables: {\n      message: prop1,\n    },\n    skip: prop2,\n  };\n}\n```\n\nstatic eg.\n\n```js\nget apollo() {\n  return {\n  // Query with parameters\n  ping: {\n    query: gql`query PingMessage($message: String!) {\n      ping(message: $message)\n    }`,\n    options: {\n      variables: {\n        message: 'hai',\n      },\n      skip: true,\n    },\n  },\n    // Additional options here. static. you can add skip here also\n    forceFetch: true,\n  };\n}\n```\n\n#### Advanced Options\n\n##### Options\n\nYou can add these to options/directly to the ping property in the above example if you dont want them to be polymer reactive.\n\n- `skip` Used to set the state of the query subscribtion. Check example below.\n- `loadingKey` will update the component data property you pass as the value. You should initialize this property to `false` in properties. When the query is loading, this property will be set to `true` and as soon as it no longer is, the property will be set to `false`.\n\n##### Hooks\n\nThese are the available advanced options you can use:\n- `error(error)` is a hook called when there are errors, `error` being an Apollo error object with either a `graphQLErrors` property or a `networkError` property.\n- `success(result)` is a hook called when query/subscription returns successfully. Note. result = { data, loading, networkStatus}\n- `watchLoading(isLoading)` is a hook called when the loading state of the query changes.\n\n\n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\n// Apollo-specific options\nget apollo() {\n  return {\n  // Advanced query with parameters\n  pingMessage: {\n    query: gql`query PingMessage($message: String!) {\n      ping(message: $message)\n    }`,\n    // Reactive parameters\n    options: 'computedProp',\n\n    // Loading state\n    // loadingKey is the name of the data property\n    // that will be unset when the query is loading\n    // and set when it no longer is.\n    loadingKey: 'loadingQueriesCount',\n    // Error handling\n    error(error) {\n      console.error('We\\'ve got an error!', error);\n    },\n    success(result) {\n      console.error('Success.!', result); // result is of the format { data, loading, networkStatus };\n    },\n    // watchLoading will be called whenever the loading state changes\n    watchLoading(isLoading) {\n      // isLoading is a boolean\n    },\n  },\n  };\n}\ncomputedFn: function(prop1, prop2) {\n  return { variables: { message: `${prop1} ping...`}, skip: prop2 };\n}\n```\n\n\n### Refetch Query\n\nUse $`apollo.refetch(key);`\n\n```html\n\u003cpaper-icon-button on-tap=\"refetchTags\" icon=\"refresh\"\u003e\u003c/paper-icon-button\u003e\n```\n\n```js\n// Apollo-specific options\n{\n  // 'tags' property of your polymer element\n  tags: {\n    query: gql`query tagList {\n      tags {\n        id,\n        label\n      }\n    }`,\n  },\n},\nrefetchTags(){\n   this.$apollo.refetch(\"tags\");\n}\n```\n\n\n### Reactive Query Example\n\nHere is a reactive query example using polling:\n\n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\n// Apollo-specific options\nget apollo() {\n  return {\n  // 'tags' property of your polymer element\n  tags: {\n    query: gql`query tagList {\n      tags {\n        id,\n        label\n      }\n    }`,\n    options: 'computedProp',\n  },\n  };\n}\ncomputedFn: function(prop1, prop2) {\n  return {\n    variables: { var1: prop1 },\n    pollInterval: prop2, // ms\n  };\n}\n```\n\nHere is how the server-side looks like:\n\n```js\nexport const schema = `\ntype Tag {\n  id: Int\n  label: String\n}\n\ntype Query {\n  tags: [Tag]\n}\n\nschema {\n  query: Query\n}\n`;\n\n// Fake word generator\nimport casual from 'casual';\n\n// Let's generate some tags\nvar id = 0;\nvar tags = [];\nfor (let i = 0; i \u003c 42; i++) {\n  addTag(casual.word);\n}\n\nfunction addTag(label) {\n  let t = {\n    id: id++,\n    label,\n  };\n  tags.push(t);\n  return t;\n}\n\nexport const resolvers = {\n  Query: {\n    tags(root, args, context) {\n      return tags;\n    },\n  },\n};\n```\n\n### Skip query example\n\n```js\n...\nstatic get properties() {\n  return {\n    computedProp: {\n      type: Object,\n      computed: 'computeFn(prop1, prop2)'\n    }\n  };\n}\n\n// Apollo-specific options\nget apollo() {\n  return {\n  // 'tags' property of your polymer element\n  tags: {\n    query: gql`query tagList {\n      tags {\n        id,\n        label\n      }\n    }`,\n    options: 'computedProp',\n  },\n  };\n}\ncomputedFn: function(prop1, prop2) {\n  return {\n    variables: { var1: prop1 },\n    skip: prop2, // Boolean\n  };\n}\n```\n\n\n### Fragments\n\n\n```js\nimport gql from 'graphql-tag';\n\nconst fragment = gql`fragment CommonFields on tags {\n  id,\n  label\n}`;\n```\n\nEmbed the fragment in your query document directly with:\n\n```js\nimport gql from 'graphql-tag';\n// Apollo-specific options\nreturn {\n  // 'tags' property of your polymer element\n  tags: {\n    query: gql`query tagList {\n      tags: tags(rate: 0) {\n        ...CommonFields\n      },\n      besttags: tags(rate: 10) {\n        ...CommonFields\n      }\n    }\n    ${fragment}`\n  },\n}\n```\n\n\n### Mutations\n\nMutations are queries that changes your data state on your apollo server. For more info, visit the [apollo doc](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\\.mutate).\n\n```js\n  addTag() {\n    // We save the user input in case of an error\n    const newTag = this.newTag;\n    // We clear it early to give the UI a snappy feel\n    this.newTag = '';\n    // Call to the graphql mutation\n    this.$apollo.mutate({\n      // Query\n      mutation: gql`mutation ($label: String!) {\n        addTag(label: $label) {\n          id\n          label\n        }\n      }`,\n      // Parameters\n      variables: {\n        label: newTag,\n      },\n      // Update the cache with the result\n      // 'tagList' is the name of the query declared before\n      // that will be updated with the optimistic response\n      // and the result of the mutation\n      updateQueries: {\n        tagList: (previousQueryResult, { mutationResult }) =\u003e {\n          // We incorporate any received result (either optimistic or real)\n          // into the 'tagList' query we set up earlier\n          return {\n            tags: [...previousQueryResult.tags, mutationResult.data.addTag],\n          };\n        },\n      },\n      // Optimistic UI\n      // Will be treated as a 'fake' result as soon as the request is made\n      // so that the UI can react quickly and the user be happy\n      optimisticResponse: {\n        __typename: 'Mutation',\n        addTag: {\n          __typename: 'Tag',\n          id: -1,\n          label: newTag,\n        },\n      },\n    }).then((data) =\u003e {\n      // Result\n      console.log(data);\n    }).catch((error) =\u003e {\n      // Error\n      console.error(error);\n      // We restore the initial user input\n      this.set(\"newTag\",newTag);\n    });\n  },\n},\n```\n\nServer-side:\n\n```js\nexport const schema = `\ntype Tag {\n  id: Int\n  label: String\n}\n\ntype Query {\n  tags: [Tag]\n}\n\ntype Mutation {\n  addTag(label: String!): Tag\n}\n\nschema {\n  query: Query\n  mutation: Mutation\n}\n`;\n\n// Fake word generator\nimport faker from 'faker';\n\n// Let's generate some tags\nvar id = 0;\nvar tags = [];\nfor (let i = 0; i \u003c 42; i++) {\n  addTag(faker.random.word());\n}\n\nfunction addTag(label) {\n  let t = {\n    id: id++,\n    label,\n  };\n  tags.push(t);\n  return t;\n}\n\nexport const resolvers = {\n  Query: {\n    tags(root, args, context) {\n      return tags;\n    },\n  },\n  Mutation: {\n    addTag(root, { label }, context) {\n      console.log(`adding tag '${label}'`);\n      return addTag(label);\n    },\n  },\n};\n```\n\n\n## Subscriptions\n\nTo make enable the websocket-based subscription, a bit of additional setup is required:\n\n```javascript\nimport ApolloClient, { createNetworkInterface } from 'apollo-client';\n// New Imports\nimport { Client } from 'subscriptions-transport-ws';\nimport { print } from 'graphql-tag/printer';\n\n// quick way to add the subscribe and unsubscribe functions to the network interface\nconst addGraphQLSubscriptions = (networkInterface, wsClient) =\u003e Object.assign(networkInterface, {\n  subscribe: (request, handler) =\u003e wsClient.subscribe({\n    query: print(request.query),\n    variables: request.variables,\n  }, handler),\n  unsubscribe: (id) =\u003e {\n    wsClient.unsubscribe(id);\n  },\n});\n\n// Create the network interface\nconst networkInterface = createNetworkInterface({\n  uri: 'http://localhost:3000/graphql',\n  transportBatching: true,\n});\n\n// Create the subscription websocket client\nconst wsClient = new Client('ws://localhost:3030');\n\n// Extend the network interface with the subscription client\nconst networkInterfaceWithSubscriptions = addGraphQLSubscriptions(\n  networkInterface,\n  wsClient,\n);\n\n// Create the apollo client with the new network interface\nexport const apolloClient = new ApolloClient({\n  networkInterface: networkInterfaceWithSubscriptions,\n});\n\n// Your app is now subscription-ready!\n\n\n```\n\nUse the `$apollo.subscribe()` method to subscribe to a GraphQL subscription that will get killed automatically when the component is detached. To disable this feature set onReady = true. :\n\n```javascript\nattached() {\n  const subQuery = gql`subscription tags($type: String!) {\n    tagAdded(type: $type) {\n      id\n      label\n      type\n    }\n  }`;\n\n  const observer = this.$apollo.subscribe({\n    query: subQuery,\n    variables: {\n      type: 'City',\n    },\n  });\n\n  observer.subscribe({\n    next(data) {\n      console.log(data);\n    },\n    error(error) {\n      console.error(error);\n    },\n  });\n},\n```\n\nYou can declare subscriptions in the `apollo` option with the `subscribe` keyword:\n\n```javascript\nstatic get properties() {\n  return {\n    cityComputed: {\n      type: Object,\n      computed: 'getCity(city)'\n    }\n  };\n}\nget apollo() {\n  return {\n  // Subscriptions\n  subscribe: {\n    // When a tag is added\n    tags: {\n      query: gql`subscription tags($type: String!) {\n        tagAdded(type: $type) {\n          id\n          label\n          type\n        }\n      }`,\n      options: 'cityComputed',\n      // Reactive variables\n\n      // Success hook\n      success(data) {\n        console.log(data);\n        // Let's update the local data\n        this.tags.push(data.tagAdded);\n      },\n    },\n  },\n  };\n}\ngetCity(city) {\n    return {\n      variables: {\n        // This works just like regular queries\n        // and will re-subscribe with the right variables\n        // each time the values change\n        type: city,\n      },\n    };\n}\n```\n\nYou can then access the subscription `ObservableQuery` object with `this.$apollo.subscriptions.\u003cname\u003e`.\n\n\n## Pagination with `fetchMore`\n\nUse the `fetchMore()` method on the query:\n\n```javascript\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch2\u003ePagination\u003c/h2\u003e\n    \u003cdiv class=\"tag-list\" hidden=\"{{!tagsPage}}\"\u003e\n      \u003ctemplate is=\"dom-repeat\" items=\"[[tagsPage.tags]]\" as=\"tag\"\u003e\n        \u003cdiv class=\"tag-list-item\"\u003e\n          {{ tag.id }} - {{ tag.label }} - {{ tag.type }}\n        \u003c/div\u003e\n      \u003c/template\u003e\n      \u003cdiv class=\"actions\"\u003e\n        \u003cpaper-button hidden=\"{{!showMoreEnabled}}\" on-tap=\"showMore\"\u003eShow more\u003c/paper-button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { PolymerApolloMixin } from 'polymer-apollo';\nimport { apolloClient } from './config.js';\nimport gql from 'graphql-tag';\n\nclass MyElement extends PolymerApolloMixin({apolloClient}, Polymer.Element) {\n  static get is() {\n    return 'example-element'\n  }\n  static get properties() {\n    return {\n      page: {\n        type: Number,\n        value: 0,\n      },\n      pageSize: {\n        type: Number,\n        value: 10,\n      },\n      showMoreEnabled: {\n        type: Number,\n        value: true,\n      },\n    }\n  }\n  get apollo() {\n    return {\n    // Pages\n    tagsPage: {\n      // GraphQL Query\n      query: gql`query tagsPage ($page: Int!, $pageSize: Int!) {\n        tagsPage(page: $page, size: $pageSize) {\n          tags {\n            id\n            label\n            type\n          }\n          hasMore\n        }\n      }`,\n      options: {\n        // Initial variables\n        variables: {\n          page: 'page',\n          pageSize: 'pageSize',\n        },\n      },\n\n    },\n    };\n  }\n  showMore() {\n    this.page ++;\n    // Fetch more data and transform the original result\n    this.$apollo.queries.tagsPage.fetchMore({\n      // New variables\n      variables: {\n        page: this.page,\n        pageSize: 20,\n      },\n      // Transform the previous result with new data\n      updateQuery: (previousResult, { fetchMoreResult }) =\u003e {\n        const newTags = fetchMoreResult.data.tagsPage.tags;\n        const hasMore = fetchMoreResult.data.tagsPage.hasMore;\n\n        this.showMoreEnabled = hasMore;\n\n        return {\n          tagsPage: {\n            // Merging the tag list\n            tags: [...previousResult.tagsPage.tags, ...newTags],\n            hasMore,\n          },\n        };\n      },\n    });\n  }\n};\n\u003c/script\u003e\n```\n\nSimilar to fetchMore the following methods can be used. for queries $apollo.queries[name] for subscriptions $apollo.subscriptions[name]\n\n* refetch()\n* fetchMore()\n* updateQuery()\n* startPolling()\n* stopPolling()\n* subscribeToMore()\n* currentResult()\n* variables : an object containing variables used to get this result.\n* loading : boolean, useful if you set notifyOnNetworkStatusChange to true in query options.\n* networkStatus : the status of the request ,useful if you set notifyOnNetworkStatusChange to true in query options\n\n---\n\n### Like it?\n\n:star: this repo\n\n### Found a bug?\n\nRaise an issue!\n\n### Contributors\n\nAnthony Hinsinger ([@atoy40](https://github.com/atoy40))\n\nArun Kumar T K ([@aruntk](https://github.com/aruntk))\n\nEdward Watson ([@edge0701](https://github.com/edge0701))\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fpolymer-apollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faruntk%2Fpolymer-apollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fpolymer-apollo/lists"}