Skip to main content
Version: v17.0.0

useClientQuery

useClientQuery hook is used to render queries that read only client fields.

The Relay Compiler fully supports client-side extensions of the schema, which allows you to define local fields and types.

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

These client-only fields are not sent to the server, and should be updated using APIs for local updates, for example 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>
);
}

Arguments​

  • query: GraphQL query specified using a graphql template literal.
  • variables: Object containing the variable values to fetch the query. These variables need to match GraphQL variables declared inside the query.

Return Value​

  • data: Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.
    • The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of data above is: {| user: ?{| name: ?string |} |}.

Behavior​

  • This hooks works as useLazyLoadQuery with fetchPolicy: store-only, it does not send the network request.

Is this page useful?

Help us make the site even better by answering a few quick questions.