{"id":15192390,"url":"https://github.com/reach-digital/polymer-apollo-client","last_synced_at":"2025-10-27T17:30:34.821Z","repository":{"id":57741562,"uuid":"100033771","full_name":"reach-digital/polymer-apollo-client","owner":"reach-digital","description":"Polymer Apollo GraphQL Client web components","archived":false,"fork":false,"pushed_at":"2020-02-01T17:59:06.000Z","size":589,"stargazers_count":29,"open_issues_count":6,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-28T21:23:03.587Z","etag":null,"topics":["apollo","apollo-client","graphql","graphql-client","graphql-files","graphql-query","graphql-subscriptions","polymer","polymer-2","polymer-element","polymer2","web-component","web-components"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/reach-digital.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":"2017-08-11T13:20:10.000Z","updated_at":"2023-07-17T22:50:58.000Z","dependencies_parsed_at":"2022-09-09T12:02:14.835Z","dependency_job_id":null,"html_url":"https://github.com/reach-digital/polymer-apollo-client","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach-digital%2Fpolymer-apollo-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach-digital%2Fpolymer-apollo-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach-digital%2Fpolymer-apollo-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach-digital%2Fpolymer-apollo-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reach-digital","download_url":"https://codeload.github.com/reach-digital/polymer-apollo-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860932,"owners_count":16556009,"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","graphql","graphql-client","graphql-files","graphql-query","graphql-subscriptions","polymer","polymer-2","polymer-element","polymer2","web-component","web-components"],"created_at":"2024-09-27T21:23:09.754Z","updated_at":"2025-10-27T17:30:29.496Z","avatar_url":"https://github.com/reach-digital.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Polymer Apollo GraphQL Client web components 🚀\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/reach-digital/polymer-apollo-client)\n\nEasy integration with GraphQL.\n\n\u003c!--\n```html\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"build/apollo-client.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"graphql-client.html\"\u003e\n    \u003clink rel=\"import\" href=\"graphql-query.html\"\u003e\n    \u003clink rel=\"import\" href=\"../polymer/lib/elements/dom-bind.html\"\u003e\n    \u003cstyle\u003e\n      html {\n        font-family: sans-serif; \n      }\n    \u003c/style\u003e\n    \u003cdiv\u003e\n      \u003cdom-bind\u003e\n        \u003ctemplate is=\"dom-bind\"\u003e\n         \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n        \u003c/template\u003e\n      \u003c/dom-bind\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003c!-- To explore and play with the API, go to https://api.graphcms.com/simple/v1/swapi --\u003e\n\u003c!-- This field is editable, so you can try things out --\u003e\n\n\u003cgraphql-client config='{\"uri\": \"https://api.graphcms.com/simple/v1/swapi\"}'\u003e\u003c/graphql-client\u003e\n\n\u003cgraphql-query result=\"{{data}}\"\u003e\n  query {\n    Starship(name: \"Millennium Falcon\") {\n      name\n      class\n    }\n  }\n\u003c/graphql-query\u003e\n\n\u003cul\u003e\n  \u003cli\u003eName: [[data.Starship.name]]\u003c/li\u003e\n  \u003cli\u003eClass: [[data.Starship.class]]\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Getting started:\n\n```html\n\u003c!-- Import the `build/apollo-client.js` in your website for a default setup --\u003e\n\u003cscript src=\"bower_components/polymer-apollo-client/build/apollo-client.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- Import the `build/apollo-client-subscription.js` instead of `build/apollo-client.js`, if you need GraphQL subscriptions support --\u003e\n\u003cscript src=\"bower_components/polymer-apollo-client/build/apollo-client-subscription.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- Import the `build/apollo-client-subscription-file-upload.js` instead of `build/apollo-client.js`, if you need file upload via GraphQL support --\u003e\n\u003cscript src=\"bower_components/polymer-apollo-client/build/apollo-client-subscription-file-upload.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- Define a graphql-client somewhere once --\u003e\n\u003cgraphql-client config='{\"uri\": \"https://api.graphcms.com/simple/v1/swapi\"}'\u003e\u003c/graphql-client\u003e\n\n\u003cgraphql-query result=\"{{data}}\"\u003e\n  query {\n    Starship(name: \"Millennium Falcon\") {\n      name\n      class\n    }\n  }\n\u003c/graphql-query\u003e\n\n\u003cul\u003e\n  \u003cli\u003eName: [[data.Starship.name]]\u003c/li\u003e\n  \u003cli\u003eClass: [[data.Starship.class]]\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Deferred queries\nDeferred queries use `Polymer.Async.idlePeriod.run(executeQuery)` to defer the query execution to a later time.\n\n\n```html\n\u003c!-- Client is already defined, so no need to do it twice --\u003e\n\u003cgraphql-query result=\"{{starShipsData}}\" defer\u003e\n  query {\n    allStarships(first: 5, filter: {pilots_some: {name_not: \"\"}}) {\n      name\n      class\n      pilots {\n        name\n        homeworld {\n          name\n        }\n      }\n    }\n  }\n\u003c/graphql-query\u003e\n\n\u003ctemplate is=\"dom-repeat\" items=\"[[starShipsData.allStarships]]\" as=\"starship\"\u003e\n  \u003ch2\u003e[[starship.name]] ([[starship.class]])\u003c/h2\u003e\n  \u003cul\u003e\n    \u003ctemplate is=\"dom-repeat\" items=\"[[starship.pilots]]\" as=\"pilot\"\u003e\n      \u003cli\u003e[[pilot.name]] ([[pilot.homeworld.name]])\u003c/li\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n## Query variables\n\nWhen the `variables` property changes, the query gets automatically re-fetched.\n\nFor a full blown example, take a look at the third demo. The gist is that you need to dynamically calculate the\nvariables object based on other properties of the element.\n\n```html\n\u003cgraphql-query result=\"{{pagination}}\" variables=\"[[_calculateVariables(skip)]]\"\u003e\n  query Pagination($skip: Int!) {\n    allStarships(first: 5, skip: $skip) {\n      name\n      class\n    }\n  }\n\u003c/graphql-query\u003e\n```\n\n## Options\n\nYou can pass options to `HttpLink()`, `WebSocketLink()` and `ApolloClient()` using\n`config`, `wsConfig` and `apolloConfig` properties. It may be useful for authorization,\nconnection to Apollo Client DevTools, etc.\n\n```html\n\u003cgraphql-client\n    config='{\n      \"uri\": \"https://graphql.endpoint/graphql\",\n      \"transportBatching\": true,\n      \"headers\": {\n        \"authorization\": \"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamtjaDFhc2kwMDN5MGExNXhteHIydWMzIiwiaWF0IjoxNTMzNzE5MzY2fQ.gielaRu4-YVrixfuj4AHbVbVo1fBbewkJwFb93krmMQ\"\n      }\n    }'\n    ws-config='{\n      \"uri\": \"wss://graphql.endpoint/graphql\",\n      \"options\": {\n        \"reconnect\": true,\n        \"connectionParams\": {\n          \"Authorization\": \"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamtjaDFhc2kwMDN5MGExNXhteHIydWMzIiwiaWF0IjoxNTMzNzE5MzY2fQ.gielaRu4-YVrixfuj4AHbVbVo1fBbewkJwFb93krmMQ\"\n        }\n      }\n    }'\n    apollo-config='{\"connectToDevTools\": true}'\u003e\n\u003c/graphql-client\u003e\n```\n\n## Mutations (draft)\n\n_Note: the current implementation for mutations is in draft, API might change in a future release._\n\nThe current implementation stays as close to the `\u003cgraphql-query\u003e` as possible.\n\n```html\n\u003cgraphql-mutation id=\"contactMutation\" variables=\"[[contactFormData]]\" result=\"{{contactMutationResult}}\"\u003e\n  mutation SubmitContactForm(\n    $name: String!,\n    $email: String!,\n    $phone: String!,\n    $subject: String!,\n    $message: String!\n  ) {\n    createContactForm(\n      name: $name,\n      email: $email,\n      phone: $phone,\n      subject: $subject,\n      message: $message\n    ) {\n      id\n    }\n  }\n\u003c/graphql-mutation\u003e\n```\n\n```js\n//Somewhere after your button has called submit()\nthis.contactFormData = {} //fill the contactMutation with the correct data.\n\n//It will give an error if not everything is filled in correctly.\nthis.$.contactMutation.validate()\n\nthis.$.contactMutation.execute().then((result) =\u003e {\n  //AMAZING RESULT, mutation has been submitted! 🎉\n})\n```\n\n## Todo\n- Better `\u003cgraphql-mutation\u003e` API and documentation.\n- Add Fragments examples (http://dev.apollodata.com/react/fragments.html)\n- Add Pagination examples (http://dev.apollodata.com/react/optimistic-ui.html)\n- Add Optimistic UI examples (http://dev.apollodata.com/react/optimistic-ui.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach-digital%2Fpolymer-apollo-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freach-digital%2Fpolymer-apollo-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach-digital%2Fpolymer-apollo-client/lists"}