Advanced Guides
Konfigurasi dan Kueri GraphQL dengan Parse dan Relay

15min
Kompatibilitas Relay
Pendahuluan
API GraphQL Parse Server mengikuti standar terbaru yang saat ini tersedia untuk API yang sangat skalabel dan proyek front-end yang ambisius.
Tim Open Source Parse memilih untuk mengikuti Spesifikasi Relay.
Relay adalah kerangka kerja JavaScript untuk membangun aplikasi React yang didorong oleh data yang didukung oleh GraphQL, dirancang dari awal untuk mudah digunakan, dapat diperluas, dan yang terpenting, berkinerja tinggi. Relay mencapai ini dengan kueri statis dan generasi kode di muka.
Mulai dari Parse 3.10, kompatibilitas penuh dengan Relay diimplementasikan.
Dokumen ini akan memandu Anda melalui implementasi tersebut.
Prasyarat
Untuk memulai tutorial ini, Anda akan membutuhkan:
Sebuah aplikasi yang dibuat di Back4App
Lihat tutorial Membuat Aplikasi Baru untuk belajar bagaimana cara membuat aplikasi di Back4App.
- Buat Aplikasi Baru di Back4App
Pertama-tama, perlu dipastikan bahwa Anda memiliki aplikasi yang sudah ada yang dibuat di Back4App. Namun, jika Anda adalah pengguna baru, Anda dapat memeriksa tutorial ini untuk belajar bagaimana cara membuatnya.
- Buat beberapa Kelas
Di Aplikasi baru Anda, pergi ke Database Browser dan klik tombol Buat kelas.
﻿
Pilih untuk membuat kelas Kustom dan berikan nama.
Mengikuti skema contoh Relay, saya membuat kelas Faction, Ship, dan lainnya seperti yang dijelaskan dengan properti yang sesuai, tetapi Anda dapat membuat kelas Anda sendiri mengikuti dokumentasi ini. Cukup ubah kueri dan mutasi Anda sesuai.
Ingat bahwa berdasarkan konvensi, kelas dimulai dengan huruf kapital, menggunakan CamelCase, dan tidak mengandung karakter khusus seperti spasi dan simbol.
Klik Buat kelas ketika Anda selesai.
- Konsol GraphQL
Dengan Kelas dan Properti Anda yang telah dibuat, Anda dapat pergi ke Konsol API dan kemudian Konsol GraphQL untuk mengeksekusi kueri dan mutasi Anda.
﻿
- Kueri
Kueri pertama kami akan mengambil objek berdasarkan objectId (jangan bingung dengan id).
Parse telah berkembang dan sekarang kueri mendukung kedua ObjectId, yang sebelumnya dikenal sebagai id di versi sebelumnya, tetapi sekarang juga mendukung Global Id, yang dikenal sebagai id, yang mengacu pada ID global Relay dan memiliki format yang lebih panjang karena mengandung nama kelas yang dienkripsi di dalamnya.
Contoh ObjectId: EaT0dDk09v
Contoh id (alias ID Global): RmFjdGlvbjpFYVQwZERrMDl2
Mari kita buat kueri pertama kami yang mengambil objek berdasarkan ObjectId:
GraphQL
 query RebelsQuery {
   faction(id:"EaT0dDk09v") {
     objectId #ObjectId for Parse
     id #GlobalID for Relay
     name #n
   }
 }
 query RebelsQuery {
   faction(id:"EaT0dDk09v") {
     objectId #ObjectId for Parse
     id #GlobalID for Relay
     name #n
   }
 }
﻿
Itu akan menghasilkan
GraphQL
 {
   "data": {
     "faction": {
       "objectId": "EaT0dDk09v",
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
 {
   "data": {
     "faction": {
       "objectId": "EaT0dDk09v",
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
﻿
Sekarang, mari kita ubah itu untuk GlobalId untuk Relay:
GraphQL
 query RebelsQuery {
   faction(id:"RmFjdGlvbjpFYVQwZERrMDl2") {
     objectId #ObjectId for Parse
     id #GlobalID for Relay
     name #n
   }
 }
 query RebelsQuery {
   faction(id:"RmFjdGlvbjpFYVQwZERrMDl2") {
     objectId #ObjectId for Parse
     id #GlobalID for Relay
     name #n
   }
 }
﻿
Dan perhatikan bahwa hasilnya akan sama:
GraphQL
 {
   "data": {
     "faction": {
       "objectId": "EaT0dDk09v",
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
 {
   "data": {
     "faction": {
       "objectId": "EaT0dDk09v",
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
﻿
Ini terjadi karena Global Id bekerja, seperti namanya yang menunjukkan, secara global, dan memiliki nama kelas yang terenkripsi di dalamnya, sehingga Parse tahu di mana mencari ID tersebut.
- Mengambil Ulang
Juga dengan Global Id Anda dapat melakukan prefetch seperti spesifikasi Relay sebagai berikut:
GraphQL
 query RefetchQuery{
   node(id:"RmFjdGlvbjpFYVQwZERrMDl2"){
     id ... on Faction{
       name
     }
   }
 }
 query RefetchQuery{
   node(id:"RmFjdGlvbjpFYVQwZERrMDl2"){
     id ... on Faction{
       name
     }
   }
 }
﻿
yang akan menghasilkan
GraphQL
 {
   "data": {
     "node": {
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
 {
   "data": {
     "node": {
       "id": "RmFjdGlvbjpFYVQwZERrMDl2",
       "name": "Galactic Empire"
     }
   }
 }
﻿
- Koneksi
﻿Koneksi Relay bekerja dengan cara yang sama di Parse dengan GraphQL, jadi, jika Anda perlu mengambil kapal Rebel:
GraphQL
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships{
       edges{
         node{
           name
         }
      }
    }
  }
}
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships{
       edges{
         node{
           name
         }
      }
    }
  }
}
﻿
yang akan menghasilkan:
GraphQL
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             "node": {
              "name": "Y-Wing"
            }
          },
          {
            "node": {
              "name": "X-Wing"
            }
          }
        ]
      }
    }
  }
}
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             "node": {
              "name": "Y-Wing"
            }
          },
          {
            "node": {
              "name": "X-Wing"
            }
          }
        ]
      }
    }
  }
}
﻿
Anda juga dapat mengambil kapal Nth:
GraphQL
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships(first: 1){
       edges{
         node{
           name
         }
      }
    }
  }
}
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships(first: 1){
       edges{
         node{
           name
         }
      }
    }
  }
}
﻿
yang menghasilkan
GraphQL
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             cursor
            "node": {
              "name": "Y-Wing"
            }
          }
        ]
      }
    }
  }
}
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             cursor
            "node": {
              "name": "Y-Wing"
            }
          }
        ]
      }
    }
  }
}
﻿
Atau ambil kapal ke-N setelah yang spesifik, menggunakan nilai cursor-nya:
GraphQL
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships(first: 1 after: "YXJyYXljb25uZWN0aW9uOjA"){ #cursor for the Y-wing ship
       edges{
         cursor
         node{
           name
        }
      }
    }
  }
}
 query RebelsShipsQuery {
   faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
     objectId
     name
     ships(first: 1 after: "YXJyYXljb25uZWN0aW9uOjA"){ #cursor for the Y-wing ship
       edges{
         cursor
         node{
           name
        }
      }
    }
  }
}
﻿
yang akan mengambil:
GraphQL
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
            "node": {
              "name": "X-Wing"
            }
          }
        ]
      }
    }
  }
}
 {
   "data": {
     "faction": {
       "objectId": "aq036IRgdP",
       "name": "Alliance to Restore the Republic",
       "ships": {
         "edges": [
           {
             "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
            "node": {
              "name": "X-Wing"
            }
          }
        ]
      }
    }
  }
}
﻿
- Mutasi
Kita juga dapat menggunakan Mutasi yang kompatibel dengan mutasi Relay.
Mari kita buat sebuah Kapal:
GraphQL
 mutation createBWing($input: CreateShipInput!){
   createShip(input: $input){
     ship{
       id
       name
     }
   }
 }
 mutation createBWing($input: CreateShipInput!){
   createShip(input: $input){
     ship{
       id
       name
     }
   }
 }
﻿
Itu membutuhkan Variabel Query berikut:
GraphQL
 {
   "input":{
     "fields": {
       "name": "B-Wing"
     }
   }
 }
 {
   "input":{
     "fields": {
       "name": "B-Wing"
     }
   }
 }
﻿
Dan akan mengembalikan Global Id dan nama seperti yang ditentukan dalam mutasi:
GraphQL
 {
   "data": {
     "createShip": {
       "ship": {
         "id": "U2hpcDpXb21QZnVzeXVF",
         "name": "B-Wing"
       }
     }
   }
 }
 {
   "data": {
     "createShip": {
       "ship": {
         "id": "U2hpcDpXb21QZnVzeXVF",
         "name": "B-Wing"
       }
     }
   }
 }
﻿
﻿
Diperbarui 27 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Integrasi Pengujian Parse Cloud Code untuk Developer
BERIKUTNYA
Pembaruan Keamanan & Penambahan Fitur Backend Back4App 2024
Konfigurasi dan Kueri GraphQL dengan Parse dan Relay

Kompatibilitas Relay

Pendahuluan

Prasyarat

1 - Buat Aplikasi Baru di Back4App

2 - Buat beberapa Kelas

3 - Konsol GraphQL

4 - Kueri

5 - Mengambil Ulang

6 - Koneksi

7 - Mutasi
