Поделиться через

API Fabric для редактора GraphQL

API Fabric для GraphQL предоставляет графическую среду разработки GraphQL в браузере, которая позволяет интерактивной игровой площадке создавать, тестировать и просматривать динамические результаты запросов и мутаций GraphQL.

Чтобы перейти к редактору, откройте элемент API для GraphQL из рабочей области в Fabric и выберите "Запрос " в левом нижнем углу экрана портала.

Снимок экрана, показывающий, где отображается параметр

Введите и выполните запросы GraphQL непосредственно на вкладке "Запросы". Возможности Intellisense доступны с помощью сочетания клавиш: CTRL + ПРОБЕЛ (Windows) или Command + ПРОБЕЛ (macOS). Выберите "Выполнить" , чтобы выполнить запрос и получить данные из источника данных.

Снимок экрана редактора API, на котором показана вкладка

Создание кода

После тестирования и создания прототипа требуемой операции GraphQL редактор API создает стандартный код Python или Node.js на основе запроса или изменения, выполняемого в редакторе. Вы можете локально запустить созданный код для тестирования и повторно использовать его в процессе разработки приложений.

Внимание

Созданный код использует учетные данные интерактивного браузера и должен использоваться только для тестирования. В производственной среде всегда регистрируйте приложение в Microsoft Entra и используйте соответствующие client_id и области действия. Полный пример можно найти в примере кода в Connect Applications.

Чтобы приступить к работе, выполните запрос, нажмите кнопку "Создать код " и выберите язык соответствующим образом:

Снимок экрана редактора API с параметром создания кода.

Затем можно скопировать созданный код и сохранить его в виде файла в локальной папке. В зависимости от выбранного языка выполните следующие простые действия для локального тестирования:

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 или аналогичную команду в выбранном менеджере пакетов, чтобы установить самую последнюю версию библиотеки удостоверений.

  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"
}

Переменные упрощают чтение, тестирование и изменение кода мутаций.

Связанный контент

  • Last updated on