בס״ד
오늘 apollo-elements의 0.0.1 버전을 발표했습니다. 이것은 패키지입니다. Apollo GraphQL 1에 연결된 웹 구성 요소를 쉽게 만들 수 있습니다.

아폴로 원소 / 아폴로 원소

🚀🌛 발사 플랫폼 사용👩‍🚀👨‍🚀

🚀 아폴로 원소👩‍🚀

🌑 Apollo GraphQL에 맞는 사용자 정의 요소🌜
👩‍🚀 이것은 개발자의 작은 걸음이자 웹 플랫폼의 큰 걸음이다!👨‍🚀






Apollo Elements는 다양한 기본 웹 구성 요소 창작 라이브러리를 기반으로 한 소프트웨어 패키지를 제공합니다.응용 프로그램의 크기를 줄이기 위해 적합한 항목을 선택할 수 있습니다.

npm init @apollo-elements

🤖 프레젠테이션

#leeway 은 예시적인 채팅 PWA로 lit-apollo을 사용하면 실제 업무를 피하기 쉽습니다.Source Repository

LaunchCTL 은 SpaceX의 발사에 관한 정보를 표시하는 간단한 PWA이다.비공식적인 spacex.land GraphQL API를 사용합니다.Source Repository

🗺 설명서 및 설명서

API 문서만 보려면 apolloelements.dev에 문의하여 모든 소프트웨어 패키지를 확인하십시오.

🥑 Core

🧱 Components

🍸 Mixins

🔥 Lit

🏁 FAST

👻 Haunted

⚛️ Atomico

🦄 Hybrids

🔬 Gluon

🧬 Polymer

어떤 상황에서도 사용

…
View on GitHub
Apollo Elements는 웹 구성 요소 라이브러리(예를 들어 lit-element 또는 hybrids)와 Apollo 클라이언트 사이의 파이프를 처리하기 때문에 응용 프로그램 구축에 전념할 수 있습니다.
웹 구성 요소에 익숙하지 않으면 선택하십시오👀 "웹 구성 요소 구축 지원"시리즈에서는 다음과 같은 작업을 신속하게 수행할 수 있습니다.

웹 구성 요소를 구축합시다!섹션 1: 표준

포니 볼스🇮🇱🇨🇦 ・ 2018년 9월 18일・ 10분 읽기

#webcomponents #customelements #javascript #html

연결된 구성 요소

구성 요소 기반 응용 프로그램에서 모든 구성 요소는 일부 단독 상태 저장소에서 그 상태를 얻을 수 있다.예를 들어 Redux나 MobX 저장소에 연결된 구성 요소를 만들고 상태 퍼즐 변경에 가입할 수 있습니다.
GraphQL의 유연하고 확장 가능한 문법은 구성 요소 기반의 디자인에 적합하다. Apollo의 강력한 실현으로 우리는 GraphQL 데이터와 구성 요소 간의 연결을 쉽게 할 수 있다.apollo-link-state을 사용하면 redux와 같은 클라이언트 상태 용기에서 완전히 벗어날 수 있고 apollo 캐시에서 전체 구성 요소 상태를 조회할 수 있습니다.

query UserProfilePage($userId: ID) {
  session @client {
    token
    expiresAt
    id
  }

  user(id: $id) {
    name
    avatar
    friends {
      name
      id
    }
  }
}

번호를 맞추다.

이제 아폴로 원소가 있으면 건축과 연결된 부품을 쉽게 가동하고 운행할 수 있다.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 문서로 설정하면 설정을 완료할 수 있습니다.

내장형 GraphQL 스크립트

인라인 GraphQL을 사용하여 HTML에서 질의를 선언적으로 정의할 수도 있습니다.

<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 요소는 lit-apollo에서 시작되지만 단일 구성 요소 클래스를 지원하는 데 만족하지 않습니다.버전 0이(가) 발표, 이름 바꾸기 및 재지정되었으며 지원, 및.또한 일부 스타일의 쌍방향 귀속 요소를 가지고 있기 때문에 템플릿에서 {{data}} 문법으로 apollo 상태를 공개할 수 있다.
하지만 이곳의 목표는 개발자에게 더 많은 선택을 주는 것이다.이상에서 원하는 것이 아니라면, Apollo Elements는 class mixins을 제공하여 바닐라와 유사한 구성 요소 클래스를 시작하고 실행할 수 있습니다. 원한다면 구식 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 }`;
  }
}

앞으로 더 많은 웹 구성 요소 라이브러리와 프레임워크를 지원할 계획이므로repo의 발표를 주목하십시오.
따라서 프로젝트에 가장 적합한 패키지를 계속 설치하십시오.

@apollo-elements/mixins 류 혼합물

@apollo-elements/lit-apollo 조명 소자

에 사용

@apollo-elements/hybrids 혼합동력

에 사용

@apollo-elements/gluon 접착제

에 사용

@apollo-elements/polymer 폴리머 스타일 알림 소자

에 사용

프레젠테이션

그것의 실제 응용을 보고 싶습니까?GraphQL 구독을 사용하고lit 요소로 구성 요소를 보여주는 간단한 채팅 프로그램 프레젠테이션을 구축했습니다.
#leeway 은 진보된 웹 응용 프로그램으로 lit-apollo을 사용하면 실제 작업을 피하기 쉽습니다.source repo을 보고 Apollo 요소를 사용하여 응용 프로그램을 구축하는 예시를 알아보십시오.프레젠테이션은 다음과 같습니다.

SSR

코드 분할

적극 축소, lit-html 템플릿 문자

포함
CSS의

CSS(예: import shared from '../shared-styles.css';)

GQL의

GQL(예: import query from './my-component-query.graphql';)

웹소켓의 GraphQL 구독

그래서 오늘은 apollo-elements을 해보도록 하겠습니다.

각주

¹ 아폴로 원소는 내가 관리하는 지역사회 프로젝트로 유성과 무관하다.

² 또는 혼합된 경우 렌더링 함수 하나만 필요합니다.