是否可以防止在组件状态更改/重新渲染时重新获取`useLazyQuery` 查询? [英] Is it possible to prevent `useLazyQuery` queries from being re-fetched on component state change / re-render?

问题描述

目前我有一个 useLazyQuery 钩子，它在按下按钮时触发(搜索表单的一部分).

钩子行为正常，只有在按下按钮时才会触发.但是，一旦我触发它一次，它就会在每次组件重新渲染时触发(通常是由于状态更改).

因此，如果我搜索一次，然后编辑搜索字段，结果会立即出现，而且我不必再次单击搜索按钮.

不是我想要的 UI，如果您完全删除搜索文本(因为它试图使用 null 作为变量进行搜索)，它会导致错误，有什么办法可以防止 useLazyQuery 在重新渲染时重新获取?

这可以使用 useQuery 解决，这取决于搜索"状态，当我单击按钮时，该状态会被切换.但是我更愿意看看我是否可以避免增加组件的复杂性.

const AddCardSidebar = props =>{const [搜索，切换搜索] = useState(false);const [searchParams, setSearchParams] = useState({姓名: ''});const [searchResults, setSearchResults] = useState([]);const [selectedCard, setSelectedCard] = useState();const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {变量:{ searchParams },onCompleted() {setSearchResults(searchCardsQueryResponse.data.searchCards.cards);}});...返回 (<div><h1>AddCardSidebar</h1><div>{searchResults.length !== 0 &&searchResults.map(result => {返回 (setSelectedCard(result.scryfall_id)}/>);})}

<表格>...<button type='button' onClick={() =>searchCardsQuery()}>搜索</表单>...

);};

解决方案

react-apollo 文档没有提到 useLazyQuery 是否应该在变量出现时继续触发查询更改，但是当您想要手动触发查询时，他们确实建议使用 useApolloClient 钩子.他们有一个例子与这种用法相匹配case(单击按钮会触发查询).

function DelayedQuery() {const [dog, setDog] = useState(null);const 客户端 = useApolloClient();返回 (<div>{狗&&<img src={dog.displayImage}/>}<按钮onClick={async() =>{const { 数据 } = 等待 client.query({查询:GET_DOG_PHOTO，变量:{品种:'牛头犬'}，});设置狗(数据.狗)；}}>点我！

);}

Currently I have a useLazyQuery hook which is fired on a button press (part of a search form).

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).

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.

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

This can be worked around using useQuery 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.

const AddCardSidebar = props => {
  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 (
    <div>
      <h1>AddCardSidebar</h1>
      <div>
        {searchResults.length !== 0 &&
          searchResults.map(result => {
            return (
              <img
                key={result.scryfall_id}
                src={result.image_uris.small}
                alt={result.name}
                onClick={() => setSelectedCard(result.scryfall_id)}
              />
            );
          })}
      </div>
      <form>

        ...

        <button type='button' onClick={() => searchCardsQuery()}>
          Search
        </button>
      </form>

      ...

    </div>
  );
};

解决方案

The react-apollo documentation doesn't mention whether useLazyQuery should continue to fire the query when variables change, however they do suggest using the useApolloClient hook when you want to manually fire a query. They have an example which matches this use case (clicking a button fires the query).

function DelayedQuery() {
  const [dog, setDog] = useState(null);
  const client = useApolloClient();

  return (
    <div>
      {dog && <img src={dog.displayImage} />}
      <button
        onClick={async () => {
          const { data } = await client.query({
            query: GET_DOG_PHOTO,
            variables: { breed: 'bulldog' },
          });
          setDog(data.dog);
        }}
      >
        Click me!
      </button>
    </div>
  );
}

这篇关于是否可以防止在组件状态更改/重新渲染时重新获取`useLazyQuery` 查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！