How I can skip request/query in useLazyLoadQuery
.
import { useLazyLoadQuery } from 'react-relay/hooks';
const id = props.selectedId // id can be a number or null
const user = useLazyLoadQuery(query, {id}) // skip query/request network if id is null
You can use the @skip
or @include
directive. If the query ends up being empty following the directive conditions, no network request will be made. Consider the example:
import { useLazyLoadQuery } from 'react-relay/hooks';
function MaybeUser(props) {
const { userId } = props;
// 👆 is optional/nullable
useLazyLoadQuery(
graphql`
query MaybeUserQuery($userId: ID!, $skip: Boolean!) {
user(id: $userId) @skip(if: $skip) {
fullName
}
}
`,
{
userId: userId || '', // we need to pass something because of the query $userId type decleration
skip: !userId, // skip when there is no user ID
},
);
return <magic />;
}
Empty userId
produces an empty MaybeUserQuery
resulting in no network requests.