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.

Ketik dan jalankan 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 dari sumber data.

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

Membuat kode

Setelah menguji dan membuat prototipe operasi GraphQL yang diinginkan, editor API 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 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 memperlihatkan opsi cara membuat kode.

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

Python

  1. Buat lingkungan virtual dengan menjalankan perintah python -m venv .venv.

  2. Aktifkan venv dengan menjalankan .venv\Scripts\activate atau source .venv/bin/activate.

  3. Instal dependensi yang diperlukan dengan menjalankan 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": {}
}

  2. Jalankan npm install --save @azure/identity atau perintah serupa di manajer paket yang Anda pilih untuk menginstal versi terbaru pustaka identitas.

  3. Jalankan kode dengan node <filename>.js.

Pengembangan kueri dan mutasi

Tinjau skema GraphQL singkat ini. Ini mendefinisikan satu tipe Post dengan kueri untuk membaca satu postingan atau mencantumkan semua postingan, serta mutasi untuk membuat, memperbarui, atau menghapus postingan, mendukung semua kasus penggunaan CRUDL (create, read, update, delete, list).

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

Baca data yang diekspos melalui GraphQL menggunakan kueri apa pun yang ditentukan dalam skema. Kueri getPost terlihat seperti contoh ini.

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

Respons:

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

Gunakan mutasi seperti createPost menulis data dan 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
  }
}

Respons:

{
  "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 sebagai variabel ke kueri atau mutasi Anda. Variabel berfungsi seperti variabel dalam bahasa pemrograman lainnya. Setiap variabel dideklarasikan dengan nama yang digunakan untuk mengakses nilai yang disimpan di dalamnya. Dengan menggunakan contoh mutasi sebelumnya, Anda mengubahnya 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 menggunakan contoh berikut.

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

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

Konten terkait

  • Last updated on