Advanced Guides
Parse 3.10+ のRelay互換性とGraphQL API詳細ガイド
14 分
リレーの互換性 はじめに parse server graphql apiは、非常にスケーラブルなapiと野心的なフロントエンドプロジェクトのために現在利用可能な最新の標準に従っています。 parseオープンソースチームは、graphqlサーバーの リレー https //relay dev/docs/en/graphql server specification 仕様に従うことを選択しました。 リレーは、graphqlによって駆動されるデータ駆動型のreactアプリケーションを構築するためのjavascriptフレームワークで、使いやすく、拡張可能で、何よりもパフォーマンスに優れるようにゼロから設計されています。リレーは、静的クエリと事前コード生成を使用してこれを実現します。 parse 3 10から、 リレー https //relay dev/docs/en/graphql server specification との完全な互換性が実装されています。 この文書では、それらの実装について説明します。 前提条件 このチュートリアルを始めるには、次のものが必要です: back4appで作成されたアプリ 「 新しいアプリを作成するチュートリアル 」を参照して、back4appでアプリを作成する方法を学んでください。 1 新しいback4appアプリを作成する まず、back4appで既存のアプリが作成されていることを確認する必要があります。ただし、新しいユーザーの場合は、 このチュートリアル https //www back4app com/docs/get started/new parse app を確認して、アプリを作成する方法を学んでください。 2 いくつかのクラスを作成する 新しく作成したアプリで、「 データベースブラウザ データベースブラウザ 」に移動し、「 クラスを作成 クラスを作成 」ボタンをクリックします。 「 カスタム カスタム 」クラスを作成することを選択し、名前を付けます。 「 relayの例スキーマ https //relay dev/docs/en/graphql server specification#schema 」に従って、faction、shipなどのクラスを作成しましたが、ドキュメントに従ってクラスを作成することもできます。クエリやミューテーションをそれに応じて変更してください。 慣例として、クラス名は大文字で始まり、キャメルケースであり、スペースや記号などの特殊文字を含まないことを覚えておいてください。 作成が完了したら、「 クラスを作成 クラスを作成 」をクリックします。 3 graphqlコンソール クラスとプロパティを作成したら、次に apiコンソール apiコンソール に行き、次に graphqlコンソール graphqlコンソール でクエリやミューテーションを実行できます。 4 クエリ 最初のクエリは、オブジェクトの objectid objectid に基づいてオブジェクトを取得します( id id と混同しないでください)。 parseは進化し、現在クエリは objectid objectid をサポートしています。これは以前のバージョンでは id id として知られていましたが、現在は global id global id もサポートしています。これは id id として知られ、relayのグローバルidを指し、クラス名が暗号化されて含まれているため、より長い形式を持っています。 の例 objectid objectid eat0ddk09v の例 id id (別名:グローバルid): rmfjdglvbjpfyvqwzerrmdl2 オブジェクトの objectid objectid を使用して、最初のクエリを作成しましょう。 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } それは出力されます 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } では、relayのglobalidのためにそれを変更しましょう 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } そして、結果が同じであることに注意してください 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } これは、 グローバルid グローバルid が、その名前が示すように、グローバルに機能し、クラス名が暗号化されているため、parseはそのidを検索する場所を知っているからです。 5 再取得 また、 グローバルid グローバルid を使用すると、次のように relayの仕様 https //relay dev/docs/en/graphql server specification#object identification を事前取得できます 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } これは次の結果になります 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 接続 relayの接続 https //relay dev/docs/en/graphql server specification#connections は、graphqlを使用したparseでも同様に機能します。したがって、rebelの船を取得する必要がある場合は 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } その結果 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 } 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 } その結果 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 } 特定の船の後にn番目の船を、そのカーソル値を使用して取得します 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 } これにより取得されます 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 ミューテーション 私たちはまた、 relayのミューテーション https //relay dev/docs/en/graphql server specification#mutations に互換性のあるミューテーションを使用できます。 新しい 船 船 を作成しましょう 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } 次のクエリ変数が必要です 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } そして、以下の グローバルid グローバルid と 名前 名前 を返します。これはミューテーションで指定された通りです 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }