각 프레임에서 작업하는 GraphQL 구성 요소

어떻게 된 건지 알아?모두가 발표한 핫한 새로운 틀을 들으셨습니까?조만간 너의 엉터리 낡은 응용 프로그램의 앞쪽 창고에서 퇴색될 것이다.다음 프로젝트를 꿈꾸기 시작하면 어떻게 다른 일을 할 것인가.아니면 대대적인 리메이크에 힘쓰실 거예요.™️, 그러나 계획대로 진행되지는 않았다.절망, 좌절, 좌절, 뒤집히는 러닝머신에서 벗어날 수 있는 방법이 있는지 알고 싶다.
친구야, 내가 너에게 말해 줄게. 해결책이 있어. 네 얼굴을 똑바로 봐.사실, 이 해결 방안은 당신이 이 글을 읽는 브라우저에 내장되어 있다.웹 구성 요소를 사용하면 투기 주기에서 잘 벗어날 수 있다.

프레임워크 상호 운용성
웹 구성 요소의 주요 장점 중 하나는 HTML DOM 객체일 뿐입니다.이것은 주로 HTML 속성, DOM 속성과 이벤트 등 표준을 통해 서로 및 응용 프로그램의 다른 부분과 상호작용을 한다는 것을 의미한다.<spicy-input> 요소가 있다고 가정하면 사용자가 성인만 사용할 단어를 입력할 때마다 spicy-change 이벤트가 발생합니다.최종적으로 서로 다른 사용자 정의 요소 기류(예를 들어 <spicy-input>를 LitElement로 바꾸어 재구성FASTElement하면 외부 API(속성, 속성, 명칭 슬롯, css 사용자 정의 속성 또는 음영 부분과 이벤트)가 변하지 않으면 다른 파일을 변경할 필요가 없다.
이 글을 읽고 갑자기 실현<spicy-input>원소에 대한 충동이 생겼다면 당신은 우리가 기다리고 있는 영웅입니다. 그러니 계속하세요.

With web components, the library or framework you build them with is an implementation detail, and you can swap them out piecemeal without changing the rest of your app.

이것은 또한 오래된 학교 프레임워크에서 웹 구성 요소를 사용하거나 다른 웹 구성 요소 라이브러리와 함께 사용할 수 있음을 의미한다.

모서리의

<spicy-input
  (spicy-change)="onSpicyChange($event)"
  [value]="spicyValue"></spicy-input>

프리뷰

return (
  <spicy-input
    onspicy-change={onSpicyChange}
    value={spicyValue}
  ></spicy-input>
);

리액션

const spicyInputRef = createRef(null);
const onSpicyChange = e => setSpicyValue(e.target.value);
const [spicyValue, setSpicyValue] = useState('');
useEffect(() => spicyInputRef.current.addEventListener('spicy-change', onSpicyChange));
useEffect(() => (spicyInputRef.current.value = spicyValue), [spicyValue]);
return <spicy-input ref={spicyInputRef}></spicy-input>

날씬하다

<spicy-input
  on:spicy-change={onSpicyChange}
  value={spicyValue}></spicy-input>

Vue

<spicy-input
  @spicy-change="onSpicyChange"
  :value="spicyValue"></spicy-input>

TL;DR: web components work in all frameworks¹, or none, since they're just HTML and the DOM.

GraphQL 및 웹 구성 요소
"따라서 상호 운용성은""다시 쓰기""의 부담을 덜어줍니다."™️"팀과 응용 프로그램 사이에서 우리의 업무를 공유하는 데 도움을 주지만 웹 구성 요소에는 또 다른 슈퍼 기능이 있습니다. 이것은 우리가 업무를 완성하는 데 도움을 줄 수 있습니다. 바로 봉인입니다.
좋은 웹 구성 요소를 작성하여 내부와 외부를 함께 유지합니다.내 말은 구성 요소의 내부는 숨겨지고 외부 API는 안정적이고 접근이 가능하다는 것이다.
GraphQL 세계에서, 이것은 조회를 구성 요소와 연결시켜 데이터와 DOM 구조를 밀접하게 연결하는 것을 의미할 수 있다.Apollo 요소는 쿼리 구성 요소를 정의하여 데이터를 개인적인 그림자 DOM에 나타낼 수 있도록 합니다.

import { useQuery, html, component } from '@apollo-elements/haunted';
import { gql, TypedDocumentNode } from '@apollo/client/core';
import { PostsQuery } from './Posts.query.graphql';

function Posts({ limit, sort }) {
  const { data } = useQuery(PostsQuery, { variables: { limit, sort } });

  const posts = data?.posts ?? [];

  function onLike() {
    const { id } = event.target.closest('li');
    this.dispatchEvent(new CustomEvent('like-post', { detail: { id } }));
  }

  return html`
    <h2>Posts</h2>
    <ol>
      ${posts.map(({ id, coverImage, summary, title, url, liked }) => html`
      <li id="${id}">
        <a href="${url}"><img src="${coverImage}" role="presentation"/> ${title}</a>
        <p>${summary}</p>
        <button role="switch"
            aria-checked="${liked}"
            aria-label="toggle liked"
            @click="${onLike}">
          ${liked ? '💔' : '💓'}
        </button>
      </li>
      `)}
    </ol>
  `;
}

Posts.observedAttributes = ['limit', 'sort'];

customElements.define('posts-list', component(Posts));

이 코드 세션에서 <posts-list> 구성 요소는 게시물 요약 목록을 보여 줍니다. 그 중에서 각 목록 항목은 게시물의 id를 포함합니다.일반적으로 요소 ID를 이렇게 동적으로 사용하지는 않지만, Shadow DOM을 사용할 때<posts-list>의 내부는 문서의 나머지 부분과 격리되어 있기 때문에 작성자로서 Shadow root를 완전히 제어할 수 있고, 그곳에서 우리가 좋아하는 일을 할 수 있으며, 페이지의 나머지 부분에 부정적인 영향을 미칠지 걱정할 필요가 없다.
내부 DOM이 이렇게 강력하게 봉인되어 있기 때문에 Angular팀의 동료들은 우리가 구성 요소의 내부 구조를 바꾸더라도 오류가 발생하지 않을 것이라고 자신만만하게 응용 프로그램에 가져올 수 있다.

예.

모서리의

<label>Posts per page
  <input type="number" step="10" [(ngModel)]="limit"/>
</label>

<label>Sort
  <select [(ngModel)]="sort">
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
  </select>
</label>

<posts-list
    [limit]="limit"
    [sort]="sort"
    (like-post)="onLikePost($event)"
></posts-list>

프리뷰

function PostContainer() {
  const [limit, setLimit] = useState(10);
  const [sort, setSort] = useState('asc');
  return (
    <label>Posts per page
      <input
          type="number"
          step="10"
          value={limit}
          onInput={e => setLimit(e.target.value)}/>
    </label>

    <label>Sort
      <select onInput={e => setSort(e.target.value)}>
        <option value="asc">Ascending</option>
        <option value="desc">Descending</option>
      </select>
    </label>

    <posts-list
        limit={limit}
        sort={sort}
        onlike-post={onLikePost}
    ></posts-list>
  );
}

리액션

function PostContainer() {
  const postsListRef = createRef(null);
  const [limit, setLimit] = useState(10);
  const [sort, setSort] = useState('asc');
  useEffect(() => postsListRef.current.addEventListener('like-post', onLikePost));
  useEffect(() => postsListRef.current.limit = limit, [limit]);
  useEffect(() => postsListRef.current.sort = sort, [sort]);

  return (
    <label>Posts per page
      <input
          type="number"
          step="10"
          value={limit}
          onInput={e => setLimit(e.target.value)}/>
    </label>

    <label>Sort
      <select onInput={e => setSort(e.target.value)}>
        <option value="asc">Ascending</option>
        <option value="desc">Descending</option>
      </select>
    </label>

    <posts-list ref={postsListRef}></posts-list>
  );
}

날씬하다

<label>Posts per page
  <input type="number" step="10" bind:value={limit}/>
</label>

<label>Sort
  <select bind:value={sort}>
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
  </select>
</label>

<posts-list limit={limit} sort={sort} on:like-post={onLikePost}></posts-list>

Vue

<label>Posts per page
  <input type="number" step="10" v-model="limit"/>
</label>

<label>Sort
  <select v-model="sort">
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
  </select>
</label>

<posts-list limit="limit" sort="sort" @like-post="onLikePost"></posts-list>

Apollo 요소를 사용하여 복잡한 단일 페이지 응용 프로그램을 작성할 수 있습니다.모든 구성 요소는 자신의 내부 상태를 관리하고 템플릿 시스템(예를 들어 lit-html이나 구식 자바스크립트 프레임워크 연결 속성과 이벤트, 그리고 Apollo 캐시managing client-side state를 사용합니다.

자세히 보기
더 많은 것을 알고 싶으세요?Google getting started guide 을 읽고 GraphQL이 웹 응용 프로그램에 웹 구성 요소를 한 번에 가져오는 방법을 알아보십시오.또는, 이미 사용하기 시작했다면, API docs 을 보십시오. 가장 좋아하는 웹 구성 요소 라이브러리에서 구성 요소를 어떻게 사용하는지 자세한 정보를 보십시오.
따라서 지금부터 응용 프로그램에서GraphQL과 웹 구성 요소를 구축하세요!

각주

Why all the extra code for React? As of this writing, React has the poorest HTML and DOM support of any framework . 이런 상황이 곧 바뀌길 바란다.또한, 여러 개의 라이브러리 wrapper 가 있습니다. 이 템플릿 파일을 모두 처리하면 React에서 웹 구성 요소를 쉽게 사용할 수 있습니다.