Compatibilità Parse Server 3.10+ con Relay e GraphQL
15 min
compatibilità con relay introduzione l'api graphql di parse server segue gli ultimi standard attualmente disponibili per api altamente scalabili e progetti front end ambiziosi il team open source di parse ha scelto di seguire la specifica di relay https //relay dev/docs/en/graphql server specification relay è un framework javascript per costruire applicazioni react basate sui dati alimentate da graphql, progettato fin dall'inizio per essere facile da usare, estensibile e, soprattutto, performante relay raggiunge questo obiettivo con query statiche e generazione di codice anticipata a partire da parse 3 10, è stata implementata la piena compatibilità con relay https //relay dev/docs/en/graphql server specification questo documento ti guiderà attraverso queste implementazioni requisiti per iniziare con questo tutorial, avrai bisogno di un'app creata su back4app vedi il tutorial crea nuova app https //www back4app com/docs/get started/new parse app per imparare come creare un'app su back4app 1 crea una nuova app back4app prima di tutto, è necessario assicurarsi di avere un'app esistente creata su back4app tuttavia, se sei un nuovo utente, puoi controllare questo tutorial https //www back4app com/docs/get started/new parse app per imparare come crearne una 2 crea alcune classi nella tua app appena creata, vai al \<font color="#2166ae">database browser\</font> e clicca sul \<font color="#2166ae">crea una classe\</font> pulsante scegli di creare una \<font color="#2166ae">classe personalizzata\</font> e dagli un nome seguendo il schema di esempio relay https //relay dev/docs/en/graphql server specification#schema , ho creato le classi faction, ship e altre come descritto con proprietà corrispondenti, ma puoi creare le tue classi seguendo questa documentazione cambia semplicemente le tue query e mutazioni di conseguenza ricorda che per convenzione le classi iniziano con una lettera maiuscola, sono in camelcase e non contengono caratteri speciali come spazi e simboli clicca su \<font color="#2166ae">crea classe\</font> quando hai finito 3 console graphql con le tue classi e proprietà create, puoi andare alla \<font color="#2166ae">console api\</font> e poi \<font color="#2166ae">console graphql\</font> per eseguire le tue query e mutazioni 4 query la nostra prima query recupererà un oggetto in base al suo \<font color="#2166ae">objectid\</font> (non confondere con \<font color="#2166ae">id\</font> ) parse si è evoluto e ora le query supportano sia \<font color="#2166ae">objectid\</font> , precedentemente noto come \<font color="#2166ae">id\</font> nelle versioni precedenti, ma ora supporta anche \<font color="#2166ae">global id\</font> , noto come \<font color="#2166ae">id\</font> , che si riferisce all'id globale di relay e ha un formato più lungo poiché contiene il nome della classe crittografato al suo interno esempio di \<font color="#2166ae">objectid\</font> eat0ddk09v esempio di \<font color="#2166ae"> id\</font> (alias id globale) rmfjdglvbjpfyvqwzerrmdl2 facciamo la nostra prima query recuperando un oggetto in base al suo \<font color="#2166ae">objectid\</font> 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } questo produrrà 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } ora, cambiamo quello per il globalid per relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } e nota che il risultato sarà lo stesso 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } questo accade perché il \<font color="#2166ae">global id\</font> funziona, come suggerisce il suo nome, a livello globale, e ha il nome della classe crittografato al suo interno, quindi parse sa dove cercare quell'id 5 ricaricamento anche con il \<font color="#2166ae">global id\</font> puoi prefetchare come la specifica di relay https //relay dev/docs/en/graphql server specification#object identification come segue 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } che risulterà in 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 connessioni le connessioni di relay https //relay dev/docs/en/graphql server specification#connections funzionano allo stesso modo in parse con graphql, quindi, se hai bisogno di recuperare le navi dei ribelli 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } che risulterà in 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } puoi anche recuperare le navi nth 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } che porta a 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } o recupera la n esima nave dopo una specifica, utilizzando il suo valore di cursore 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } che recupererà 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 mutazioni possiamo anche utilizzare mutazioni compatibili con le mutazioni di relay https //relay dev/docs/en/graphql server specification#mutations creiamo una nuova \<font color="#2166ae">nave\</font> 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } questo richiede la seguente variabile di query 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } e restituirà il \<font color="#2166ae">global id\</font> e \<font color="#2166ae">nome\</font> come specificato nella mutazione 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }