Question

我一直在使用client.query从数据库中获取数据并使用useState设置状态。

这是一个例子：

const [videos, setVideos] = useState([]); 

client.query({ query: GET_VIDEOS })
 .then(response => {
        setVideos(response.data.videos); 
})

但是，这不会在100％的时间内加载。通常，一段时间后第一次加载应用程序时，它不会加载。在这些情况下，我通常必须重新启动。

这个问题使我想研究useQuery而不是client.query。

但是，文档中的示例仅显示了我们如何使用useQuery在组件中进行直接更改。

示例：

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

但是，我现在不想更改组件。我宁愿查询数据，然后使用useState将查询的数据设置为状态。

我如何最好地做到这一点？我曾经想到的一个想法是创建一个返回null但查询数据的组件。看起来像这样：

function Videos() {
  const { loading, error, data } = useQuery(GET_VIDEOS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  setVideos(data); 

  return null;
}

我很想知道在这种情况下什么是最佳实践。

Answer 1

react-apollo的useQuery具有onCompleted作为其选项之一，因此您可以像使用它一样

const { loading, error } = useQuery(GET_VIDEOS, {
  onCompleted: (data) => setVideos(data)
});

Answer 2

最佳做法是直接使用数据，而无需设置状态。

您只显示了对setState的调用，而在组件的某个地方使用了video状态变量，对吗？

直接将获取的数据传递到那里。您无需调用“ setVideos”即可触发更改。只要更改查询结果，用户界面就会相应更改。

如果您的用例不是要预先获取数据，则有useLazyQuery。

将useQuery返回的数据设置为状态

2 个答案: