데이터 쿼리 및 저장

여러분의 뉴킹릭 제작을 돕기 위해 뉴렐릭 One SDK 를 제공합니다. 여기에서는 NerdGraph( GraphQL 저장소)를 통해 쿼리와 변형을 수행할 수 있는 SDK 쿼리 구성 요소를 사용하는 방법을 알아볼 수 있습니다.

구성 요소 개요

우리의 데이터 구성 요소는 React Apollo를 기반으로 합니다. 가장 기본적인 구성 요소는 NerdGraphQuery 이며, 이는 graphql-tag 라이브러리 에서 생성된 모든 GraphQL 또는 GraphQL AST를 밸리변수로 허용하고, variables 로 전달된 쿼리 변수 집합을 허용합니다. 이 쿼리를 통해 우리는 네 그룹으로 나눌 수 있는 추가 쿼리 집합을 만들었습니다.

• 사용자 쿼리: 현재 사용자 및 관련 계정을 쿼리할 수 있습니다. 이 카테고리의 구성요소: UserStorageQuery 및 AccountsQuery.
• 엔터티 쿼리: 뉴렐릭은 엔터티 중심이므로 우리는 엔터티에 더 쉽게 액세스할 수 있도록 쿼리를 사용합니다. 계산, 검색, 나열, 쿼리, 즐겨찾기 기능이 있습니다. 이 카테고리의 구성요소: EntityCountQuery, EntitySearchQuery, EntitiesByDomainTypeQuery, EntitiesByGuidsQuery, EntityByGuidQuery, EntityByNameQuery.
• 저장소 쿼리: 뉴렐릭은 NerdStorage 라고 하는 간단한 저장소 메커니즘을 제공합니다. Nerdpack 제작자는 이를 사용하여 애플리케이션 구성 설정 데이터, 사용자별 데이터 및 기타 작은 데이터 조각을 저장할 수 있습니다. 이 카테고리에는 UserStorageQuery, AccountStorageQuery, EntityStorageQuery, UserStorageMutation, AccountStorageMutation 및 EntityStorageMutation 구성요소가 포함됩니다.
• NRQL 쿼리: NRQL 통해 뉴렐릭 데이터를 쿼리할 수 있도록 NrqlQuery 구성요소를 제공합니다. 이 구성 요소는 다양한 형식으로 데이터를 반환할 수 있으므로 쿼리뿐만 아니라 차트 작성에도 사용할 수 있습니다.

쿼리 구성 요소

모든 쿼리 구성요소는 다양한 상태가 전달될 수 있는 하위 소품으로 함수를 허용합니다. 이 콜백은 다음 속성을 가진 객체를 수신합니다.

• loading: 데이터 가져오기가 발생할 때 true로 설정되는 부울입니다. 구성요소는 cache-and-network 전략을 사용합니다. 즉, 데이터가 로드된 후 후속 데이터 다시 로드가 먼저 오래된 데이터로 트리거된 다음 가장 최근 데이터가 도착하면 새로 고쳐질 수 있습니다.
• data: 요청된 데이터를 검색하는 루트 속성입니다. 구조는 NerdGraph 스키마를 기반으로 하는 루트 구조와 일치합니다. 이는 고도로 중첩된 데이터 구조의 경우에도 마찬가지입니다. 즉, 원하는 데이터를 찾으려면 아래로 탐색해야 합니다.
• error: 쿼리가 실패할 경우 Error 인스턴스를 포함합니다. 데이터가 로드 중이거나 가져오기에 성공하면 undefined 로 설정됩니다.
• fetchMore: 쿼리를 청크로 로드할 때 사용할 수 있는 콜백 함수입니다. 이 함수는 가능하고, 더 많은 데이터를 사용할 수 있으며, fetchMore 이미 트리거되지 않은 경우에만 존재합니다. 데이터는 기본적으로 200개의 배치로 로드됩니다. Dropdown 또는 List 와 같이 플랫폼에서 제공하는 다른 구성요소는 fetchMore 허용할 수 있으므로 쉽게 결합할 수 있습니다.

돌연변이 구성요소

또한 돌연변이 구성요소는 쿼리 구성요소와 같은 하위 항목을 함수로 허용합니다. 변형은 구성 요소 수준에서 미리 구성될 수 있으며 구성 요소에서 사용할 수 있는 함수가 다시 전달됩니다.

이는 변형을 수행하기 위한 표준 React Apollo 접근 방식이지만 구성 요소에 추가된 정적 mutation 메서드를 사용하는 것이 더 쉬울 수도 있습니다. 아래에서 이 주제에 대해 자세히 알아보세요.

정적 방법

설명된 모든 구성 요소는 정적 메서드도 노출하므로 선언적으로 사용하기보다는 명령적으로 사용할 수 있습니다. 모든 Query 구성요소에는 정적 Query 메서드가 있고 모든 Mutation 구성요소에는 mutation 메서드가 있습니다. 이러한 정적 메서드는 쿼리 구성 요소와 동일한 props를 허용하지만 개체로 전달됩니다. 예를 들어:

// Declarative way (using components).
function renderAccountList() {
  return (
    <ul>
      <AccountsQuery>
        ({data, error}) => {
          if (error) {
            return <li>Failed to retrieve list: {error.message}</li>;
          }

          return data.map((account) => {
            <li key={account.id}>{account.name}</li>
          });
        }}
      </AccountsQuery>
    </ul>
  );
}

// Imperative way (using promises).
async function getAccountList() {
  let data = {};

  try {
    data = await AccountsQuery.query();
  } catch (error) {
    console.log('Failed to retrieve list: ' + error.message);
    return;
  }

  return data.actor.accounts.map((account) => {
    return account.name;
  });
}

마찬가지로 돌연변이는 어느 쪽이든 발생할 수 있습니다. 선언적으로든 명령적으로든.

Nrql쿼리

NrqlQuery 데이터를 반환할 수 있는 형식이 다양하므로 추가 설명이 필요합니다. 최대 기능을 제공하기 위해 세 가지 모두 formatType 속성을 통해 노출됩니다. NrqlQuery.formatType 아래에서 다른 값을 찾을 수 있습니다.

• NERD_GRAPH: NerdGraph에서 도착하는 형식을 반환합니다.
• RAW: 인사이트와 대시보드에서 JSON으로 플롯할 때 기본적으로 노출되는 형식입니다. 이 형식은 마이그레이션하거나 통합하려는 이 형식의 기존 스크립트가 있는 경우 유용합니다.
• CHART: 우리가 공개한 차팅 엔진에서 사용하는 형식입니다. 이 형식을 조작하는 방법에 대한 더 자세한 설명은 차트 구성 요소 가이드 에서 찾을 수 있으며, 몇 가지 예도 나와 있습니다.

데이터를 푸시하려는 경우 현재는 NrqlMutation 노출하지 않습니다. 그렇게 하려면 사용자 정의 대시보드를 추가하는 방법에 대한 이벤트 API 참조하세요.