GraphQL용 Fabric API 편집기

GraphQL용 Fabric API는 GraphQL 쿼리 및 변형의 라이브 결과를 작성, 테스트 및 확인할 수 있는 대화형 플레이그라운드를 지원하는 브라우저 내 그래픽 GraphQL 개발 환경을 제공합니다.

편집기로 이동하려면 Fabric의 작업 영역에서 GraphQL용 API 항목을 열고 포털 화면의 왼쪽 아래 모서리에서 쿼리 를 선택합니다.

쿼리 탭에서 직접 GraphQL 쿼리를 입력하고 실행합니다. Intellisense 기능은 CTRL + 공간(Windows) 또는 MacOS(Command + Space) 바로 가기 키와 함께 사용할 수 있습니다. 실행을 선택하여 쿼리를 실행하고 데이터 원본에서 데이터를 검색합니다.

코드 생성

API 편집기는 원하는 GraphQL 작업을 테스트하고 프로토타입을 생성한 후 편집기에서 실행된 쿼리 또는 변형에 따라 상용구 Python 또는 Node.js 코드를 생성합니다. 테스트 목적으로 생성된 코드를 로컬로 실행하고 애플리케이션 개발 프로세스에서 해당 코드를 다시 사용할 수 있습니다.

중요한

생성된 코드는 대화형 브라우저 자격 증명을 사용하며 테스트 목적으로만 사용해야 합니다. 프로덕션에서는 항상 Microsoft Entra에 애플리케이션을 등록하고 적절한 client_id 및 범위를 사용합니다. Connect 애플리케이션에서 샘플 코드를 사용하여 엔드투엔드 예제를 찾을 수 있습니다.

시작하려면 쿼리를 실행하고 , 코드 생성 단추를 선택하고, 그에 따라 언어를 선택합니다.

그런 다음 생성된 코드를 복사하여 로컬 폴더에 파일로 저장할 수 있습니다. 선택한 언어에 따라 다음 간단한 단계에 따라 로컬로 테스트합니다.

Python

1. 명령을 python -m venv .venv실행하여 가상 환경을 만듭니다.

2. 실행 또는 venv.을 사용하여 .venv\Scripts\activate 활성화합니다source .venv/bin/activate.

3. 를 실행 pip install azure.identity하여 필요한 종속성을 설치합니다.

4. 를 사용하여 코드를 실행합니다 python <filename.py>.

Node.JS

1. 저장한 파일과 동일한 폴더에 다음 내용이 포함된 package.json 파일을 만듭니다.

   {
     "type": "module",
     "dependencies": {}
   }
   

2. 선택한 패키지 관리자에서 실행 또는 유사한 명령을 실행 npm install --save @azure/identity 하여 최신 버전의 ID 라이브러리를 설치합니다.

3. 를 사용하여 코드를 실행합니다 node <filename>.js.

쿼리 및 변형 개발

이 짧은 GraphQL 스키마를 검토합니다. 단일 게시물을 읽거나 모든 게시물을 나열하는 쿼리가 있는 단일 Post 형식을 정의하고, 모든 CRUDL(만들기, 읽기, 업데이트, 삭제, 나열) 사용 사례를 지원하여 게시물을 생성, 업데이트 또는 삭제하는 변형을 정의합니다.

{
  type Post {
    id: ID!
    published: Boolean
  }

  type Query {
    getPost(id: ID!): Post
    getAllPosts: [Post]
  }

  type Mutation {
    createPost(title: String!, content: String!, author: String!): Post
    updatePost(id: ID!, title: String, content: String, author: String, published: Boolean): Post
    deletePost(id: ID!): Boolean
  }
}

스키마에 정의된 쿼리를 사용하여 GraphQL을 통해 노출된 데이터를 읽습니다. 쿼리는 getPost 이 예제와 같습니다.

query MyQuery {
  getPost(id: "1234") {
    title
    content
    author
  }
}

응답:

{
  "data": {
    "getPost": {
      "title": "First Post",
      "content": "This is my first post.",
      "author": "Jane Doe"
    }
  }
}

데이터를 작성하고 필요한 매개 변수를 사용하여 게시물을 만드는 등의 createPost 변형을 사용합니다.

mutation MyMutation {
  createPost(title: "Second post", content: "This is my second post", author: "Jane Doe", published: false) {
    id
    title
    content
    author
  }
}

응답:

{
  "data": {
    "createPost": {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }
  }
}

쿼리 변수

쿼리 탭의 오른쪽에 있는 쿼리 변수 창을 사용하여 매개 변수를 쿼리 또는 변형에 변수로 전달합니다. 변수는 다른 프로그래밍 언어의 변수처럼 작동합니다. 각 변수는 저장된 값에 액세스하는 데 사용되는 이름으로 선언됩니다. 이전 변형 예제를 사용하여 쿼리 변수를 사용하도록 약간 수정합니다.

mutation MyMutation ($title: String!, $content: String!, $author: String!){
  createPost(title: $title, content: $content, author: $author) {
    id
    title
    content
    author
  }
}

다음 예제를 사용하여 창에서 변수를 정의합니다.

{
  "id": "5678",
  "title": "Second Post",
  "content": "This is my second post.",
  "author": "Jane Doe"
}

변수를 사용하면 변형 코드를 보다 클리너하게 만들고 읽기, 테스트 및 수정하기 쉽습니다.

관련 콘텐츠

• 추가 쿼리 및 변형 예제
• GraphQL 스키마 뷰 및 스키마 탐색기용 패브릭 API