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

问题描述

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

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.

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

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?

这可以通过使用useQuery来解决，它依赖于搜索"状态，当我单击按钮时，该状态会打开.但是，我宁愿看看是否可以避免增加组件的复杂性.

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

推荐答案

react-apollo文档没有提到变量更改时useLazyQuery是否应继续触发查询，但是他们建议使用useApolloClient钩子当您要手动触发查询时.他们有一个示例与此用法匹配大小写(单击按钮会触发查询).

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屋！