Bagikan melalui

Fabric API untuk editor GraphQL

Fabric API untuk GraphQL menyediakan lingkungan pengembangan GraphQL grafis di dalam browser, yang memungkinkan ruang interaktif untuk menyusun, menguji, dan melihat hasil langsung dari kueri dan mutasi GraphQL Anda.

Untuk membuka editor, buka API untuk item GraphQL dari ruang kerjanya di Fabric dan pilih Kueri di sudut kiri bawah layar portal Anda.

Cuplikan layar memperlihatkan tempat opsi Kueri muncul di sudut kiri bawah layar Fabric.

Anda dapat mengetik dan menjalankan kueri GraphQL langsung pada tab Kueri . Kemampuan Intellisense tersedia dengan pintasan keyboard: CTRL + Space (Windows), atau Command + Space (macOS). Pilih Jalankan untuk menjalankan kueri dan mengambil data yang sesuai dari sumber data.

Cuplikan layar editor API, yang memiliki tab Kueri yang dibagi menjadi panel Jalankan, Variabel kueri, dan Hasil.

Membuat kode

Setelah Anda menguji dan membuat prototipe operasi GraphQL yang diinginkan, editor API dapat menghasilkan kode Python atau Node.js boilerplate berdasarkan kueri atau mutasi yang dijalankan di editor. Anda dapat menjalankan kode yang dihasilkan secara lokal untuk tujuan pengujian dan menggunakan kembali bagian-bagiannya dalam proses pengembangan aplikasi.

Penting

Kode yang dihasilkan menggunakan kredensial browser interaktif dan harus digunakan hanya untuk tujuan pengujian. Dalam produksi, selalu daftarkan aplikasi di Microsoft Entra dan gunakan client_id serta cakupan yang sesuai. Anda dapat menemukan contoh end-to-end dengan kode sampel di Connect Applications.

Untuk memulai, jalankan kueri, pilih tombol Buat kode dan pilih bahasa yang sesuai:

Cuplikan layar editor API setelah membuka opsi buat kode.

Anda kemudian dapat menyalin kode yang dihasilkan dan menyimpannya sebagai file di folder lokal. Bergantung pada bahasa pilihan, ikuti langkah-langkah sederhana untuk menguji secara lokal:

Python
  1. Membuat lingkungan virtual dengan perintah python -m venv .venv
  2. Aktifkan venv menggunakan .venv\Scripts\activate atau source .venv/bin/activate
  3. Instal dependensi yang diperlukan dengan perintah pip install azure.identity
  4. Jalankan kode dengan python <filename.py>
Node.JS
  1. Di folder yang sama dengan file yang Anda simpan, buat package.json file dengan konten berikut:
{
  "type": "module",
  "dependencies": { 
  }
}
  1. Jalankan npm install --save @azure/identity atau perintah serupa di pengelola paket pilihan Anda untuk menginstal versi terbaru pustaka identitas.
  2. Jalankan kode dengan node <filename>.js

Pengembangan kueri dan mutasi

Tinjau skema GraphQL singkat berikut, yang menentukan satu tipe Post dengan query untuk membaca satu postingan atau menampilkan semua postingan. Ini juga mendefinisikan mutasi untuk membuat, memperbarui, atau menghapus pos yang mendukung semua skema penggunaan CRUDL (membuat, membaca, memperbarui, menghapus, menampilkan).

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
}

Anda dapat membaca data yang diekspos melalui GraphQL menggunakan kueri apa pun yang ditentukan dalam skema. Kueri getPost akan terlihat seperti contoh berikut.

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

Respons:

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

Tulis data menggunakan mutasi seperti createPost membuat postingan dengan parameter yang diperlukan.

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

Tanggapan:

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

Variabel kueri

Gunakan panel Variabel kueri di sisi kanan tab Kueri untuk meneruskan parameter apa pun sebagai variabel ke kueri atau mutasi Anda. Variabel bekerja dengan cara yang sama seperti variabel dalam bahasa pemrograman lainnya. Setiap variabel perlu dideklarasikan dengan nama yang digunakan untuk mengakses nilai yang disimpan di dalamnya. Dengan contoh mutasi sebelumnya, Anda dapat memodifikasinya sedikit untuk menggunakan variabel kueri.

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

Tentukan variabel di panel seperti contoh berikut.

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

Variabel membuat kode mutasi lebih bersih dan lebih mudah dibaca, diuji, dan diubah parameternya.

Konten terkait