メインコンテンツへスキップ
バージョン: v18.0.0

useClientQuery

useClientQueryフックは、クライアントフィールドのみを読み取るクエリをレンダリングするために使用されます。

Relayコンパイラは、スキーマのクライアント側拡張を完全にサポートしており、これにより、ローカルフィールドと型を定義できます。

# example client extension of the `Query` type
extend type Query {
client_field: String
}

これらのクライアントのみのフィールドはサーバーに送信されず、ローカル更新用のAPI(たとえば、commitPayload)を使用して更新する必要があります。

const React = require('React');

const {graphql, useClientQuery} = require('react-relay');

function ClientQueryComponent() {
const data = useClientQuery(
graphql`
query ClientQueryComponentQuery {
client_field
}
`,
{}, // variables
);

return (
<div>{data.client_field}</div>
);
}

引数

  • querygraphqlテンプレートリテラルを使用して指定されたGraphQLクエリ。
  • variables:クエリをフェッチするための変数値を格納するオブジェクト。これらの変数は、クエリ内で宣言されたGraphQL変数と一致する必要があります。

戻り値

  • data:Relayストアから読み取られたデータを含むオブジェクト。オブジェクトは、指定されたクエリの形状と一致します。
    • データのFlow型もこの形状に一致し、GraphQLスキーマから派生した型が含まれます。たとえば、上記のdataの型は{| user: ?{| name: ?string |} |}です。

動作

  • このフックは、fetchPolicy: store-onlyを指定したuseLazyLoadQueryと同様に動作し、ネットワークリクエストを送信しません。

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

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