{"id":13454262,"url":"https://github.com/apollo-elements/apollo-elements","last_synced_at":"2025-05-16T08:06:52.439Z","repository":{"id":32480208,"uuid":"135019046","full_name":"apollo-elements/apollo-elements","owner":"apollo-elements","description":"🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀","archived":false,"fork":false,"pushed_at":"2024-02-22T05:25:13.000Z","size":43510,"stargazers_count":420,"open_issues_count":29,"forks_count":26,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-15T05:26:45.305Z","etag":null,"topics":["apollo-elements","gluon","graphql","hacktoberfest","hybrids","lit-element","lit-html","mixins","polymer","webcomponents"],"latest_commit_sha":null,"homepage":"https://apolloelements.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apollo-elements.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["bennypowers"],"open_collective":"apollo-elements"}},"created_at":"2018-05-27T05:42:06.000Z","updated_at":"2025-03-10T08:16:00.000Z","dependencies_parsed_at":"2023-10-11T14:20:27.298Z","dependency_job_id":"3ebd3116-9839-4d57-be3a-ea9457d99e88","html_url":"https://github.com/apollo-elements/apollo-elements","commit_stats":{"total_commits":1060,"total_committers":16,"mean_commits":66.25,"dds":"0.14056603773584908","last_synced_commit":"d5d0a47b24f965b6fbb52cd9f3f71cb7d7d6c4b9"},"previous_names":["bennypowers/lit-apollo"],"tags_count":583,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo-elements%2Fapollo-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo-elements%2Fapollo-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo-elements%2Fapollo-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo-elements%2Fapollo-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apollo-elements","download_url":"https://codeload.github.com/apollo-elements/apollo-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493385,"owners_count":22080127,"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-elements","gluon","graphql","hacktoberfest","hybrids","lit-element","lit-html","mixins","polymer","webcomponents"],"created_at":"2024-07-31T08:00:52.366Z","updated_at":"2025-05-16T08:06:47.423Z","avatar_url":"https://github.com/apollo-elements.png","language":"TypeScript","readme":"![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/logo.svg\" alt=\"Apollo Elements\" width=\"256\" height=\"256\"/\u003e\n  \u003ch1\u003e🚀 Apollo Elements 👩‍🚀\u003c/h1\u003e\n  \u003cp\u003e\u003cstrong\u003e🌑 Custom elements meet Apollo GraphQL 🌜\u003c/strong\u003e\u003c/p\u003e\n  \u003cp\u003e\u003cstrong\u003e👩‍🚀 It's one small step for a dev, one giant leap for the web platform! 👨‍🚀\u003c/strong\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n[![Made with open-wc](https://img.shields.io/badge/made%20with-open--wc-blue)](https://open-wc.org)\n[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/apollo-elements/apollo-elements/issues)\n[![ISC License](https://img.shields.io/npm/l/@apollo-elements/polymer)](https://github.com/apollo-elements/apollo-elements/blob/master/LICENCE.md)\n[![Maintainability](https://api.codeclimate.com/v1/badges/9766ab3cacfe5bfeab25/maintainability)](https://codeclimate.com/github/apollo-elements/apollo-elements/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/9766ab3cacfe5bfeab25/test_coverage)](https://codeclimate.com/github/apollo-elements/apollo-elements/test_coverage)\n[![Release](https://github.com/apollo-elements/apollo-elements/workflows/Release/badge.svg)](https://github.com/apollo-elements/apollo-elements/actions)\n\nApollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project in order to keep your app sizes small.\n\n```bash\nnpm init @apollo-elements\n```\n\n## 🤖 Demos\n- [`#leeway`](https://leeway.apolloelements.dev) is an example chat PWA that uses `lit-apollo` to make it easier for you to avoid doing actual work. [Source Repository](https://github.com/apollo-elements/leeway)\n- [`LaunchCTL`](https://launchctl.apolloelements.dev) is a simple PWA that displays info about [SpaceX](https://spacex.com) launches. It uses the unofficial [spacex.land](https://spacex.land) GraphQL API. [Source Repository](https://github.com/apollo-elements/launchctl)\n\n## 🗺 Guides and Docs\nIf you just want to see the API Docs, check them out for all our packages at [apolloelements.dev](https://apolloelements.dev)\n\n- [🥑 Core](https://apolloelements.dev/api/core/)\n- [🧱 Components](https://apolloelements.dev/api/components/)\n- [🍸 Mixins](https://apolloelements.dev/api/libraries/mixins/)\n- [🔥 Lit](https://apolloelements.dev/api/libraries/lit-apollo/)\n- [🏁 FAST](https://apolloelements.dev/api/libraries/fast/)\n- [👻 Haunted](https://apolloelements.dev/api/libraries/haunted/)\n- [⚛️ Atomico](https://apolloelements.dev/api/libraries/atomico/)\n- [🦄 Hybrids](https://apolloelements.dev/api/libraries/hybrids/)\n- [🔬 Gluon](https://apolloelements.dev/api/libraries/gluon/)\n- [🧬 Polymer](https://apolloelements.dev/api/libraries/polymer/)\n\n## Use in any Framework\n\nElements created with Apollo Elements work in any framework. Write GraphQL components once and use them in page with ease, even Angular, Preact, React, Svelte, or Vue apps.\n\n- [Angular ❤️ Apollo Elements](https://codesandbox.io/s/apollo-elements-in-angular-9smgl?file=/src/app/app.component.html)\n- [Preact 💙 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-preact-yowom?file=/src/index.js)\n- [React 💜 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-react-00ev3?file=/src/LaunchesDemo.js)\n- [Svelte 🧡 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-svelte-u6js9?file=/LaunchesDemo.svelte)\n- [Vue 💚 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-vue-cq769?file=/src/components/ApolloElementsDemo.vue)\n\n## 📦 Packages\nApollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project and keep your bundle size small, or mix and match different libraries and approaches in the same app.\n\n### 🥑 Core\n\nReactive GraphQL controllers contain sharable, reusable, and stackable logic.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/core@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';\nimport { ApolloMutationController } from '@apollo-elements/core/apollo-mutation-controller';\nimport { ApolloSubscriptionController } from '@apollo-elements/core/apollo-subscription-controller';\n```\n\n\u003c/code-copy\u003e\n\n### 🧱 Components\n\nWrite GraphQL apps in HTML.\n\n- `\u003capollo-client\u003e` provides all it's children (even across open shadow roots) with a client instance.\n- `\u003capollo-query\u003e` write GraphQL queries and their templates in HTML.\n- `\u003capollo-mutation\u003e` declarative mutation components in HTML.\n- `\u003capollo-subscription\u003e` write realtime GraphQL subscriptions and their templates in HTML.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/components@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```html\n\u003capollo-client src=\"/graphql\"\u003e\n  \u003capollo-query\u003e\n    \u003cscript type=\"application/graphql\" src=\"AllUsers.query.graphql\"\u003e\u003c/script\u003e\n    \u003ctemplate\u003e\n      \u003clink rel=\"stylesheet\" href=\"all-users.css\"\u003e\n      \u003cul\u003e\n        \u003ctemplate type=\"repeat\" items=\"{{ data.users ?? [] }}\"\u003e\n          \u003cli data-user-id=\"{{ item.id }}\"\u003e\n            \u003ch2\u003e{{ item.name }}\u003c/h2\u003e\n            \u003cimg src=\"{{ item.avatar }}\" alt=\"\"/\u003e\n          \u003c/li\u003e\n        \u003c/template\u003e\n      \u003c/ul\u003e\n    \u003c/template\u003e\n  \u003c/apollo-query\u003e\n  \u003capollo-mutation refetch-queries=\"AllUsers\"\u003e\n    \u003cscript type=\"application/graphql\" src=\"AddUser.mutation.graphql\"\u003e\u003c/script\u003e\n    \u003ctemplate\u003e\n      \u003clink rel=\"stylesheet\" href=\"add-user.css\"\u003e\n      \u003clabel for=\"name\"\u003eUser Name\u003c/label\u003e\n      \u003cinput id=\"name\" ?disabled=\"{{ loading }}\" data-variable=\"name\"/\u003e\n      \u003clabel for=\"avatar\"\u003eAvatar Image\u003c/label\u003e\n      \u003cinput id=\"avatar\" type=\"file\" ?disabled=\"{{ loading }}\" data-variable=\"avatar\"/\u003e\n      \u003csmall ?hidden=\"{{ !data }}\"\u003e{{ data.addUser.name }} added!\u003c/small\u003e\n    \u003c/template\u003e\n  \u003c/apollo-mutation\u003e\n\u003c/apollo-client\u003e\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/components/)\n\n### 🍸 Mixins\n\nThese custom element [class mixins](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) give you all the features you need to connect your components to your Apollo cache without imposing a specific component library.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/mixins@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin';\nimport { ApolloMutationMixin } from '@apollo-elements/mixins/apollo-mutation-mixin';\nimport { ApolloSubscriptionMixin } from '@apollo-elements/mixins/apollo-subscription-mixin';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/mixins/)\n\n### 🔥 lit-apollo\nThese base classes extend from [`LitElement`](https://lit.dev), so you can quickly get up and running creating declarative front-ends with Apollo GraphQL.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/lit-apollo@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { ApolloQuery } from '@apollo-elements/lit-apollo/apollo-query';\nimport { ApolloMutation } from '@apollo-elements/lit-apollo/apollo-mutation';\nimport { ApolloSubscription } from '@apollo-elements/lit-apollo/apollo-subscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/lit-apollo/)\n\n### 🏁 FAST\nThese base classes extend from [`FASTElement`](https://fast.design), with all it's ergonomics and reactivity.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/fast@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { ApolloQuery } from '@apollo-elements/fast/apollo-query';\nimport { ApolloMutation } from '@apollo-elements/fast/apollo-mutation';\nimport { ApolloSubscription } from '@apollo-elements/fast/apollo-subscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/fast/)\n\n### 👻 Haunted\n\nApollo hooks for web components, with [haunted](https://github.com/matthewp/haunted)!\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/haunted@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { useQuery } from '@apollo-elements/haunted/useQuery';\nimport { useMutation } from '@apollo-elements/haunted/useMutation';\nimport { useSubscription } from '@apollo-elements/haunted/useSubscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/haunted/)\n\n### ⚛️ Atomico\n\nAlternate hooks implementation for web components, with [atomico](https://atomico.gitbook.io/doc/)!\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/atomico@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { useQuery } from '@apollo-elements/atomico/useQuery';\nimport { useMutation } from '@apollo-elements/atomico/useMutation';\nimport { useSubscription } from '@apollo-elements/atomico/useSubscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/atomico/)\n\n### 🦄 Hybrids\n\nDescriptor factories and object spreads you can roll into your [hybrids](https://hybrids.js.org) to make it easier to connect to your Apollo cache.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/hybrids@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { query, mutation, subscription } from '@apollo-elements/hybrids';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/hybrids/)\n\n### 👩‍🔬 Gluon\nThese base classes extend from [`GluonElement`](https://github.com/ruphin/gluonjs), a simplified \u003cabbr title=\"web components\"\u003ewc\u003c/abbr\u003e library that uses `lit-html` for templating while keeping component state and lifecycle concerns 'close to the metal'.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/gluon@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport { ApolloQuery } from '@apollo-elements/gluon/apollo-query';\nimport { ApolloMutation } from '@apollo-elements/gluon/apollo-mutation';\nimport { ApolloSubscription } from '@apollo-elements/gluon/apollo-subscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/gluon/)\n\n### 🧬 Polymer\n\nThese custom elements fire [polymer](https://polymer-library.polymer-project.org)-style `*-changed` events when the Apollo cache updates their state. They extend directly from `HTMLElement` so they're small in size, and their notifying properties make them perfect for use in Polymer templates.\n\n\u003ccode-copy\u003e\n\n```bash\nnpm i -S @apollo-elements/polymer@next\n```\n\n\u003c/code-copy\u003e\n\n\u003ccode-copy\u003e\n\n```js\nimport '@apollo-elements/polymer/polymer-apollo-query';\nimport '@apollo-elements/polymer/polymer-apollo-mutation';\nimport '@apollo-elements/polymer/polymer-apollo-subscription';\n```\n\n\u003c/code-copy\u003e\n\n[Read More](https://apolloelements.dev/api/libraries/polymer/)\n\n## ‍🙏️ Acknowledgements\n`apollo-elements` is a community project maintained by Benny Powers. We proudly use [Open Web Components](https://open-wc.org) and [Modern Web](https://modern-web.dev) tools. Thanks to [Netlify](https://netlify.com) and [Heroku](https://heroku.com) for hosting our documentation and demos.\n\n[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github\u0026utm_medium=button\u0026utm_term=bennyp\u0026utm_campaign=github)\n","funding_links":["https://github.com/sponsors/bennypowers","https://opencollective.com/apollo-elements"],"categories":["Implementations","Real World","TypeScript","Component Libraries"],"sub_categories":["JavaScript/TypeScript","Component Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollo-elements%2Fapollo-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapollo-elements%2Fapollo-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollo-elements%2Fapollo-elements/lists"}