useLazyQuery results into "Too many re-renders" - reactjs

Question

I am trying to Execute queries manually and followed, therefore, the official Apollo documentation. I don't see any difference between the documentation and my code, however, I always get the error "Too many re-renders."
const FEED_QUERY = gql`
query contactAccessKey($accessKey: String!) {
contactAccessKey(accessKey: $accessKey) {
id
contactInformation
belongsTo {
id
username
email
}
}
}
`;
function AccessKeySeeEmergencyContact() {
const [contact, setContact] = useState("");
const [getContactInformation, { loading, data }] = useLazyQuery(FEED_QUERY);
if (loading) return <p>Loading ...</p>;
if (data && data.contactAccessKey) {
setContact(data.contactAccessKey);
}
const accessKeyCode = "34a60667-80e3-4c97-9ded-15875d6507b1";
return (
<div>
{contact && <div>{contact.contactInformation}</div>}
<button
onClick={() =>
getContactInformation({ variables: { accessKey: accessKeyCode } })
}
>
Click me!
</button>
</div>
);
}
export default AccessKeySeeEmergencyContact;

Answer 1

useApolloClient has functions that return a Promise and I have solved a similar issue by using this.
Please note I just copied and edited your code, there could be few syntax errors. All the best.
import { useApolloClient } from '#apollo/client';
function AccessKeySeeEmergencyContact() {
const [contact, setContact] = useState('');
const client = useApolloClient(); // this gives an ApolloClient
const accessKeyCode = '34a60667-80e3-4c97-9ded-15875d6507b1';
return (
<div>
{contact && <div>{contact.contactInformation}</div>}
<button
onClick={async () => {
const { data } = await client.query({
query: FEED_QUERY,
variables: { accessKey: accessKeyCode },
});
console.log(data);
}}>
Click me!
</button>
</div>
);
}
export default AccessKeySeeEmergencyContact;

Answer 2

Bad Apollo example!
const [contact, setContact] = useState("");
const [getContactInformation, { loading, data }] = useLazyQuery(FEED_QUERY);
if (loading) return <p>Loading ...</p>;
// additional condition to avoid endless rerendering
if (!contact && data && data.contactAccessKey) {
setContact(data.contactAccessKey);
}
Using state is unnecessary (even with condition forces additional rerendering) - you can read data directly from data (it's just a private variable):
return (
<div>
{data && <div>{data.contactInformation}</div>}