בס״ד
今天我发布了 的 0.0.1 版本apollo-elements，这是一个软件包集合，可以轻松创建连接到 Apollo GraphQL 1 的Web 组件。
🌑 自定义元素与 Apollo GraphQL 完美融合 🌜
👩🚀 对开发者来说只是一小步，对网络平台来说却是一大步！👨🚀
Apollo Elements 提供基于多种底层 Web 组件创作库的软件包。您可以选择适合您项目的软件包，以保持应用程序体积小巧。
npm init @apollo-elements
#leeway这是一个聊天类 PWA 示例，旨在lit-apollo让您更轻松地避免实际工作。源代码库LaunchCTL这是一个简单的 PWA，用于显示SpaceX发射信息。它使用非官方的spacex.land GraphQL API。源代码库如果您只想查看 API 文档，请访问apolloelements.dev查看我们所有软件包的 API 文档。
lit-elementApollo Elements 负责处理 Web 组件库（如Apollo或 Apollo Client）之间的底层架构hybrids，因此您可以专注于构建您的应用程序。
如果你是 Web 组件新手，不妨看看我的“让我们构建 Web 组件”系列教程，快速入门：
在基于组件的应用中，每个组件都可以从独立的存储状态中获取自身的状态。例如，您可以创建连接到 Redux 或 MobX 存储的组件，并订阅其自身状态的变化。
GraphQL 灵活且可扩展的语法与基于组件的设计天然契合，而 Apollo 强大的实现让我们能够轻松地将 GraphQL 数据与组件连接起来。使用 Apollo apollo-link-state，您甚至可以完全摆脱 Redux 等客户端状态容器，直接从 Apollo 缓存中查询整个组件状态。
query UserProfilePage($userId: ID) {
session @client {
token
expiresAt
id
}
user(id: $id) {
name
avatar
friends {
name
id
}
}
}
现在，借助 Apollo Elements，构建互联组件变得轻而易举。您只需提供一个 GraphQL 文档和一个用于处理模板的自定义元素类，即可开始使用。
import { ApolloQuery, html } from '@apollo-elements/lit-apollo';
// A component that uses ApolloSubscription to update
// when users go on or offline.
import './user-online-status.js';
import './loading-spinner.js';
/**
* `<user-profile-page>` Shows a user's profile, as well as a list
* of their friends which display's each one's online status via a
* GraphQL subscription.
* @extends ApolloQuery
*/
class UserProfilePage extends ApolloQuery {
render() {
const { loading, data } = this;
return (
(loading || !data) ? html`<loading-spinner></loading-spinner>`
!data.user ? : html`<login-form></login-form>`
: html`
<h1>Hello, ${data.user.name}</h1>
<profile-image src="${data.user.avatar}"></profile-image>
<h2>Who's Online?</h2>
<dl>${data.user.friends.map(({id, name}) => html`
<dt>${name}</dt>
<dd><user-online-status id="${id}"></user-online-status></dd>
`)}</dl>
`
);
}
updated() {
// get the currently logged-in user's id from the `@client` query.
const { id } = this.id;
// setting variables updates the query.
if (id) this.variables = { id };
}
}
customElements.define('user-profile-page', UserProfilePage);
将元素添加到页面后，只需将其query属性设置为 GraphQL 文档即可。
你甚至可以使用一些巧妙的小技巧，例如在 HTML 中使用内联 GraphQL 以声明方式定义查询：
<user-profile-page>
<script type="application/graphql">
query UserProfilePage($userId: ID) {
session @client {
token
expiresAt
id
}
user(id: $id) {
name
avatar
friends {
name
id
}
}
}
</script>
</user-profile-page>
可爱吧？
Apollo Elements 源于 [此处应填写项目名称] lit-apollo，但我并不满足于只支持一个组件类。版本 0 发布后进行了更名和品牌重塑，并支持lit-element[此处应填写组件名称] GluonElement、[此处应填写组件名称] 和 [此处应填写组件名称]。hybrids它还包含一些Polymer风格的双向绑定元素，因此您可以使用{{data}}语法在模板中公开 Apollo 状态。
但我们的目标是为开发者提供更多选择。如果以上选项都不符合您的需求，Apollo Elements 还提供了类混入（class mixin），让您可以快速上手任何类似原生组件的类，甚至如果您愿意，还可以使用传统的自定义类HTMLElement。
import { ApolloMutationMixin } from '@apollo-elements/mixins';
import gql from 'graphql-tag';
const mutation = gql`
mutation SendMessage($message: String!) {
sendMessage(message: $message) {
message
date
}
}
`;
const template = document.createElement('template');
template.innerHTML = `
<style>
:host([error]) #input {
border: 1px solid red;
}
details {
display: none;
}
:host([error]) details {
display: block;
}
</style>
<label>Message<input id="input"/></label>
<details>
<summary>Error!</summary>
<span id="error"></span>
</details>
`;
class ChatInput extends ApolloMutationMixin(HTMLElement) {
get input() {
return this.shadowRoot && this.shadowRoot.getElementById('input');
}
constructor() {
super();
this.mutation = mutation;
this.onKeyup = this.onKeyup.bind(this);
this.attachShadow({ mode: 'open' })
this.shadowRoot.appendChild(template.content.cloneNode(true))
this.input.addEventListener('keyup', this.onKeyup)
}
onKeyup({ key, target: { value: message } }) {
if (key !== 'Enter') return;
this.variables = { message };
this.mutate();
}
// Override implementation of `onCompleted` if desired.
// Alternatively, use a setter.
onCompleted({ message, date }) {
this.input.value = '';
}
// Override implementation of `onError` if desired.
// Alternatively, use a setter.
onError(error) {
this.setAttribute('error', error);
this.shadowRoot.getElementById('error').textContent =
`Error when sending message: ${ error }`;
}
}
我们正在制定计划，以便将来支持更多 Web 组件库和框架，请关注代码库中的发布信息。
所以，请安装最适合您项目的软件包：
@apollo-elements/mixins用于类混合@apollo-elements/lit-apollo对于点亮元素@apollo-elements/hybrids适用于混合型@apollo-elements/gluon胶子@apollo-elements/polymer适用于 Polymer 风格的通知元素想看看实际效果吗？我构建了一个简单的聊天应用程序演示，它使用 GraphQL 订阅并使用 lit-element 渲染其组件。
#leeway这是一个渐进式 Web 应用，旨在lit-apollo让您更轻松地完成实际工作。查看源代码库，了解如何使用 Apollo Elements 构建应用。演示包括：
lit-html模板字面量import shared from '../shared-styles.css';）import query from './my-component-query.graphql';）
今天就来试试吧apollo-elements！