使用 useState 存储来自 useQuery 的数据

Question

我正在使用 React 钩子来获取 GraphQL 数据react-apollo并存储本地状态：

const [userData, setUserData] = useState({})
const { loading, error, data } = useQuery(USER_QUERY)

但是，我想知道如何存储data到userData. 这是它应该如何工作：

useEffect(() => {
  setUserData(data)
}, [Object.entries(data).length])

Answer 1

看起来你所拥有的可能有效。参数中还有一个onCompleted可用选项options。它需要一个回调类型：

(data: TData | {}) => void

所以这是另一种方式：

const { loading, error, data } = useQuery(USER_QUERY, {onCompleted: setUserData})

Answer 2

您想对返回的数据做什么，而这些数据是您无法通过简单地将其用作从查询挂钩解构来完成的？在大多数用例中，它可以立即使用，因为它会在重新获取时自行更新。

如果有必要（并且可能是），正如另一个答案所说，useEffect您发布的钩子应该可以工作，但我会将依赖替换为 simple data，以防止响应具有相同长度的边缘情况，其中包含不同的数据和不更新：

useEffect(() => {
  setUserData(data)
}, [data])