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

【问题标题】：Setting data returned by useQuery as state将 useQuery 返回的数据设置为状态
【发布时间】：2020-09-21 10:36:40
【问题描述】：

我一直在使用 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;
}

我很想知道在这种情况下有哪些最佳做法。

【问题讨论】：

标签： react-native expo apollo react-apollo

【解决方案1】：

react-apollo 的 useQuery 有一个 onCompleted 作为它的选项之一，所以你可以像这样使用它

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

【讨论】：

【解决方案2】：

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

您只显示了setState 的调用，在您的组件中某处使用了video 状态变量，对吗？

直接在那里传递获取的数据。您无需调用“setVideos”来触发更改。每当查询结果更改时，UI 都会相应更改。

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

【讨论】：