GraphQL용 Fabric API 편집기

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

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

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

코드 생성

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

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

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

Python

1. 명령을 사용하여 가상 환경 만들기 python -m venv .venv
2. using venv 또는 .venv\Scripts\activatesource .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

쿼리 및 변형 개발

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

type Post {
  id: ID!
  title: String!
  content: String!
  author: String!
  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 스키마 뷰 및 스키마 탐색기용 Fabric API