Is it possible to prevent `useLazyQuery` queries from being re-fetched on component state change / re-render? : <p>Currently I have a <code>useLazyQuery</code> hook which is fired on a button press (part of a search form). </p>

<p>The hook behaves normally, and is only fired when the button is pressed. However, once I've fired it once, it's then fired every time the component re-renders (usually due to state changes).</p>

<p>So if I search once, then edit the search fields, the results appear immediately, and I don't have to click on the search button again. </p>

<p>Not the UI I want, and it causes an error if you delete the search text entirely (as it's trying to search with <code>null</code> as the variable), is there any way to prevent the <code>useLazyQuery</code> from being refetched on re-render?</p>

<p>This can be worked around using <code>useQuery</code> dependent on a 'searching' state which gets toggled on when I click on the button. However I'd rather see if I can avoid adding complexity to the component.</p>

<pre class="lang-js prettyprint-override"><code>const AddCardSidebar = props =&gt; {
  const [searching, toggleSearching] = useState(false);
  const [searchParams, setSearchParams] = useState({
    name: ''
  });
  const [searchResults, setSearchResults] = useState([]);
  const [selectedCard, setSelectedCard] = useState();

  const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
    variables: { searchParams },
    onCompleted() {
      setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
    }
  });

  ...

  return (
    &lt;div&gt;
      &lt;h1&gt;AddCardSidebar&lt;/h1&gt;
      &lt;div&gt;
        {searchResults.length !== 0 &amp;&amp;
          searchResults.map(result =&gt; {
            return (
              &lt;img
                key={result.scryfall_id}
                src={result.image_uris.small}
                alt={result.name}
                onClick={() =&gt; setSelectedCard(result.scryfall_id)}
              /&gt;
            );
          })}
      &lt;/div&gt;
      &lt;form&gt;

        ...

        &lt;button type='button' onClick={() =&gt; searchCardsQuery()}&gt;
          Search
        &lt;/button&gt;
      &lt;/form&gt;

      ...

    &lt;/div&gt;
  );
};
</code></pre>
