Utility API 소비하기(Consuming Utility APIs)

설치된 플러그인을 통해 앱에 전달된 모든 utility API 확장은 프레임워크가 올바른 순서로 인스턴스화하고 구성한 뒤, 소비할 수 있게 제공돼요. 다음 방법들로 이 인스턴스들과 상호작용할 수 있어요.

출처: 문서

본문

설치된 플러그인을 통해 앱에 전달된 모든 utility API 확장은 프레임워크가 올바른 순서로 인스턴스화하고 구성한 뒤, 소비할 수 있게 제공돼요. 다음 방법들로 이 인스턴스들과 상호작용할 수 있어요.

React 훅으로

utility API의 가장 일반적인 소비 패턴은 React 컴포넌트 안에서 useApi 훅을 호출해 그 API ref를 통해 구현을 얻는 것이에요. 이것은 원래 코어 프레임워크에서 제공됐든 플러그인에서 제공됐든 동일하게 적용돼요.

import { useApi, configApiRef } from '@backstage/frontend-plugin-api';

const MyComponent = () => {
  const configApi = useApi(configApiRef);
  const title = configApi.getString('app.title');
  // ...
};

useApi 훅은 항상 값을 반환하거나, API ref를 등록된 구현으로 해석하지 못하면 예외를 던져요. 고급 사용 사례에서는, 런타임에 제공되었을 수도 있고 아닐 수도 있는 utility API를 명시적으로 선택적으로 요청하고 싶을 때가 있는데, 그 경우 기본이 되는 useApiHolder 훅을 대신 쓸 수 있어요.

import { useApiHolder, configApiRef } from '@backstage/frontend-plugin-api';

const MyComponent = () => {
  const apis = useApiHolder();
  const configApi = apis.get(configApiRef); // may return undefined
  if (configApi) {
    const title = configApi.getString('app.title');
    // ...
  }
};

의존성으로

여러분의 utility API는 자신의 factory에서 다른 utility API에 의존할 수 있어요. createApiFactory에 deps를 선언하고 factory에서 그 결과를 읽으면 돼요.

import {
  configApiRef,
  ApiBlueprint,
  discoveryApiRef,
} from '@backstage/frontend-plugin-api';
import { MyApiImpl } from './MyApiImpl';

const myApi = ApiBlueprint.make({
  params: defineParams =>
    defineParams({
      api: myApiRef,
      deps: {
        configApi: configApiRef,
        discoveryApi: discoveryApiRef,
      },
      factory: ({ configApi, discoveryApi }) => {
        return new MyApiImpl({ configApi, discoveryApi });
      },
    }),
});

deps 섹션이 본질적으로 여러분이 선택한 자유형식 이름을 API ref에 할당한다는 점에 주의하세요. 여기서는 예를 들어 configApiRef를 configApi라는 이름에 매핑했는데, 그건 그저 관례일 뿐이에요. 프레임워크는 그 모든 deps가 인스턴스화되어 deps와 같은 이름 집합으로 factory 함수에 전달되도록 보장해요. 그 시점에 configApi는 그 API ref의 실제 동작하는 인스턴스를 가리켜요.

더 알아보기 (Learn more)