@ apollo- 要素/ 核心

QQL 反应控制器

着陆员呼叫控制中心 请回答 完毕

读取 完整 API 文档 🔎

目录

• * 安装
• 使用量
• 其他图书馆
• QQ 问题
• ++ 维护者

* 安装

阿波罗元素通过 npm,节点包管理器。 在您的工程中安装最新版本的复制件 node_modules 目录, 在您的系统中安装 npm 然后在工程的根目录中运行以下命令 :

npm install --save @apollo-elements/core

使用量

看我们的 关于设置阿波罗客户端的文件 因此,您的组件可以获取他们的数据.

首先,让我们定义我们 图QL 查询。 。 。 .

query HelloQuery {
  helloWorld {
    name
    greeting
  }
}

读我们 开发期间使用 GraphQL 文件的文件 财务报告和审定财务报表 生产 更多信息,请务必阅读 从 GraphQL 生成类型脚本 来增强开发者的经验并减少错误.

接下来,我们将定义我们的UI组件. 导入控制器、 查询和类型 :

import { ApolloQueryController } from '@apollo-elements/core';
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

import { HelloQuery } from './Hello.query.graphql';

然后定义您的组件模板 。 确定设置 query 字段,因此您的组件开始自动获取数据.

@customElement('hello-world')
export class HelloWorldElement extends LitElement {
  query = new ApolloQueryController(this, HelloQuery);

  render() {
    return html`
      <what-spin-such-loader ?active="${this.query.loading}"></what-spin-such-loader>
    ${(
      this.query.error ? html`
        <h1>😢 Such Sad, Much Error! 😰</h1>
        <pre><code>${error.message}</code></pre>`
    : html`
        <p>
          ${this.query.data?.helloWorld.greeting ?? 'Hello'},
          ${this.query.data?.helloWorld.name ?? 'Friend'}!
        </p>`
    )}
    `;
   }
}

QQ 问题

这个软件包只供Lit用户使用吗?

没有! 您可以在任何执行 ReactiveControllerHost 界面,甚至香草 HTMLElement 通过方式 ControllerHostMixin

import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';

customElements.define('hello-world', class HelloWorldElement extends ControllerHostMixin(HTMLElement) {
  query = new ApolloQueryController(this, HelloQuery);

  update() {
    const greeting = this.query.data?.helloWorld.greeting ?? 'Hello';
    const name = this.query.data?.helloWorld.name ?? 'Friend';
    // Just for demo purposes, Don't actually use innerHTML!
    this.innerHTML = `<p>${greeting}, ${name}!</p>`;
    super.update();
  }
});

其他图书馆

找别的图书馆吗? 想用阿波罗和香草 extends HTMLElement 组件? 看看我们 文件站点

++ 维护者

apollo-elements 由Benny Powers维持的社区项目.