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>
);
}
引数
query
:graphql
テンプレートリテラルを使用して指定されたGraphQLクエリ。variables
:クエリをフェッチするための変数値を格納するオブジェクト。これらの変数は、クエリ内で宣言されたGraphQL変数と一致する必要があります。
戻り値
data
:Relayストアから読み取られたデータを含むオブジェクト。オブジェクトは、指定されたクエリの形状と一致します。- データのFlow型もこの形状に一致し、GraphQLスキーマから派生した型が含まれます。たとえば、上記の
data
の型は{| user: ?{| name: ?string |} |}
です。
- データのFlow型もこの形状に一致し、GraphQLスキーマから派生した型が含まれます。たとえば、上記の
動作
- このフックは、
fetchPolicy: store-only
を指定したuseLazyLoadQuery
と同様に動作し、ネットワークリクエストを送信しません。
このページは役に立ちましたか?
いくつかの簡単な質問に答えて、 サイトをさらに改善にご協力ください.