fetchQuery

fetchQuery

React の外でクエリをフェッチしたい場合は、react-relay の fetchQuery 関数を使用できます。

// You should prefer passing an environment that was returned from useRelayEnvironment()
const MyEnvironment = require('MyEnvironment');
const {fetchQuery} = require('react-relay');

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.subscribe({
  start: () => {...},
  complete: () => {...},
  error: (error) => {...},
  next: (data) => {...}
});

引数

• environment: リクエストを実行する Relay Environment インスタンス。React コンポーネント内のどこかでこのリクエストを開始する場合は、useRelayEnvironment を使用して取得した環境を使用するのが良いでしょう。
• query: フェッチする GraphQL クエリ。graphql テンプレートリテラルを使用して指定します。
• variables: クエリをフェッチするための変数値を格納するオブジェクト。これらの変数は、クエリ内で宣言された GraphQL 変数と一致する必要があります。
• options: [オプション] オプションオブジェクト
  • networkCacheConfig: [オプション] キャッシュ設定オプションを格納するオブジェクト
    • force: ブール値。trueの場合、ネットワークレスポンスキャッシュをバイパスします。デフォルトはtrueです。

Flow 型パラメータ

• TQuery: 指定されたクエリの Flow 型に対応する必要がある型パラメータ。この型は、自動生成されたファイル <query_name>.graphql.js からインポートできます。これにより、observable によって提供されるデータの型がクエリの形状と一致し、fetchQuery の入力として渡される variables がクエリによって予期される変数の型と一致することが保証されます。

戻り値

• observable: observable インスタンスを返します。リクエストを開始するには、observable で subscribe または toPromise を呼び出す必要があります。次のメソッドを公開します。
  • subscribe: ネットワークリクエストの observable を購読するために呼び出すことができる関数。これはクエリのフェッチのみを購読するものであり、Relay ストア内のデータに対するその後の変更を購読するものではないことに注意してください。
    • 引数
      • observer: ネットワークリクエスト observable で発生するさまざまなイベントのオブザーバー関数を指定するオブジェクト。オブザーバーオブジェクトのキーとして、次のイベントハンドラーを指定できます。
        • start: ネットワークリクエストが開始されたときに呼び出される関数。ネットワーク observable の購読を表す単一の subscription 引数を受け取ります。
        • complete: ネットワークリクエストが正常に完了した場合に呼び出される関数。
        • next: ネットワークからペイロードを受信するたびに呼び出される関数。サーバーからペイロードを受信した時点での Relay ストアから読み取られたクエリデータのスナップショットを表す単一の data 引数を受け取ります。
        • error: ネットワークリクエスト中にエラーが発生した場合に呼び出される関数。発生したエラーを含む単一の error 引数を受け取ります。
        • unsubscribe: 購読が解除されるたびに呼び出される関数。ネットワーク observable の購読を表す単一の subscription 引数を受け取ります。
    • 戻り値
      • subscription: observable の購読を表すオブジェクト。subscription.unsubscribe() を呼び出すと、ネットワークリクエストがキャンセルされます。
  • toPromise:
    • 戻り値
      • promise: サーバーから最初のネットワーク応答を受信したときに解決される promise を返します。リクエストが失敗した場合、promise は拒否されます。キャンセルすることはできません。

動作

• fetchQuery は、フェッチされたデータを自動的にインメモリ Relay ストアに保存し、関連データにサブスクライブしているコンポーネントに通知します。
• fetchQuery は、クエリのデータを保持 **しません**。つまり、リクエストの完了後、いつでもデータが Relay ストアに保存されたままになることは保証されません。リクエストのスコープ外でデータを保持したい場合は、削除されないように、クエリで environment.retain() を直接呼び出す必要があります。詳細については、Relay の GC ポリシーの制御に関するセクションを参照してください。
• fetchQuery は、同時に実行されている（同じクエリと変数を持つ）、fetchQuery で開始された同一のネットワークリクエストを自動的に重複排除します。

.toPromise() を使用した動作

必要に応じて、**.toPromise()** を使用してリクエストを Promise に変換できます。toPromise はクエリを開始し、サーバーから *最初* のデータが返されたときに解決される Promise を返し、*それ以降の処理をキャンセルする* ことに注意してください。つまり、クエリ内の遅延データまたは 3D データは処理されない可能性があります。**このため、toPromise() を使用することはお勧めしません。**

const {fetchQuery} = require('react-relay');

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.toPromise() // NOTE: don't use, this can cause data to be missing!
.then(data => {...})
.catch(error => {...};

• toPromise は、サーバーから最初のネットワーク応答を受信したときに解決される Promise を返します。リクエストが失敗した場合、Promise は拒否されます。キャンセルすることはできません。

---

このページは役に立ちましたか？

サイトをさらに改善するためにご協力ください いくつかの簡単な質問に答える.