위젯

프론트엔드 위젯은 페이지에 추가하여 기능의 일부를 처리할 수 있는 독립적인 Vue 애플리케이션이나 Vue 컴포넌트 트리입니다.

좋은 위젯의 예시는 사이드바 담당자나 사이드바 기밀 여부 등이 있습니다.

위젯을 개발할 때 여러 가이드라인을 따라야 합니다.

Vue Apollo가 필요함

모든 위젯은 동일한 스택(Vue + Apollo Client)을 사용해야 합니다. 이를 위해 위젯을 컴포넌트로 사용하는 경우 응용 프로그램 루트에 Vue Apollo를 추가하거나 위젯에 직접 제공해야 합니다. 사이드바 위젯의 경우 이슈 Apollo 클라이언트 및 Apollo 프로바이더를 사용하세요:

import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
import { apolloProvider } from '~/graphql_shared/issuable_client';

function mountConfidentialComponent() {
  new Vue({
    apolloProvider,
    components: {
      SidebarConfidentialityWidget,
    },
    /* ... */
  });
}

필수 주입

모든 편집 가능한 사이드바 위젯은 접힘/펼침 상태를 처리하기 위해 SidebarEditableItem을 사용해야 합니다. 이 컴포넌트는 응용 프로그램 루트에서 제공된 canUpdate 속성이 필요합니다.

전역 상태 매핑 금지

가능한 한 위젯을 재사용 가능하도록 만들려고 합니다. 그래서 위젯이나 그 하위 컴포넌트에 외부 상태 바인딩을 추가하는 것을 피해야 합니다. 이는 Vuex 매핑과 중재자 스토어도 포함됩니다.

위젯 책임

위젯은 그에 디자인된 엔터티(담당자, 이터레이션 등)의 가져오고 업데이트하는 책임이 있습니다. 이는 위젯이 항상 데이터를 가져오도록 하는 것을 의미합니다(이미 Apollo 캐시에 없는 경우). 초깃값을 제공한다 해도 위젯은 백그라운드에서 GraphQL 쿼리를 수행하여 Apollo 캐시에 저장해야 합니다.

마침내 전역 응용 프로그램 상태로서 Apollo 클라이언트 캐시가 있는 경우, 초깃값을 사이드바 위젯에 전달할 필요가 없어질 것입니다. 그러면 캐시에서 데이터를 검색할 수 있을 것입니다.

GraphQL 쿼리 및 뮤테이션 사용

우리는 위젯이 다양한 엔터티(에픽, 이슈, Merge Request 등)와 작업할 수 있도록 융통성 있게 만들어야 합니다. 다른 사이드바에 대해 서로 다른 GraphQL 쿼리와 뮤테이션이 필요하기 때문에 우리는 매핑을 만듭니다:

export const assigneesQueries = {
  [TYPE_ISSUE]: {
    query: getIssueParticipants,
    mutation: updateAssigneesMutation,
  },
  [TYPE_MERGE_REQUEST]: {
    query: getMergeRequestParticipants,
    mutation: updateMergeRequestParticipantsMutation,
  },
};

동일한 논리를 처리하기 위해 쿼리 필드를 별명으로 지정합니다. 예를 들면:

group이나 project는 workspace가 됩니다.
issue, epic, 또는 mergeRequest는 issuable이 됩니다.

안타깝게도 Apollo는 별칭이 지정된 필드에 typename을 undefined로 할당하므로 __typename을 명시적으로 가져와야 합니다:

query issueConfidential($fullPath: ID!, $iid: String) {
  workspace: project(fullPath: $fullPath) {
    __typename
    issuable: issue(iid: $iid) {
      __typename
      id
      confidential
    }
  }
}

다른 Vue 애플리케이션과의 통신

위젯 상태의 변경(예: 성공적인 뮤테이션 후)을 부모 응용프로그램에 전달해야 할 경우 이벤트를 발생시켜야 합니다:

updateAssignees(assigneeUsernames) {
  return this.$apollo
    .mutate({
      mutation: this.$options.assigneesQueries[this.issuableType].mutation,
      variables: {...},
    })
    .then(({ data }) => {
      const assignees = data.issueSetAssignees?.issue?.assignees?.nodes || [];
      this.$emit('assignees-updated', assignees);
    })
}

때로는 NotesApp과 같은 다른 Vue 애플리케이션에서의 변경 사항을 듣고 싶을 수 있습니다. 이 경우 클라이언트를 가져와 특정 쿼리를 듣는 렌더리스 컴포넌트를 사용할 수 있습니다:

import { fetchPolicies } from '~/lib/graphql';
import { confidentialityQueries } from '~/sidebar/constants';
import { defaultClient as gqlClient } from '~/graphql_shared/issuable_client';

created() {
  if (this.issuableType !== IssuableType.Issue) {
    return;
  }
  
  gqlClient
    .watchQuery({
      query: confidentialityQueries[this.issuableType].query,
      variables: {...},
      fetchPolicy: fetchPolicies.CACHE_ONLY,
    })
    .subscribe((res) => {
      this.setConfidentiality(issuable.confidential);
    });
},
methods: {
  ...mapActions(['setConfidentiality']),
},

해당 컴포넌트 예시 보기

Merge Request 위젯

Merge Request 위젯 확장 프레임워크에 특화된 문서를 참조하세요.

위젯