useLazyQuery приводит к «Слишком много повторных рендеров»

Question

Я пытаюсь Выполнять запросы вручную и, следовательно, следовать официальной документации Apollo. Я не вижу никакой разницы между документацией и моим кодом, однако я всегда получаю ошибку «Слишком много повторных визуализаций».

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

Плохой пример Apollo!

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);
}

Использование состояния не нужно (даже с условием принудительного дополнительного повторного рендеринга) - вы можете читать данные непосредственно из data (это просто частная переменная ):

return (
  <div>
    {data && <div>{data.contactInformation}</div>}