使用useState存储useQuery中的数据

时间:2019-08-20 15:35:31

标签: javascript reactjs graphql react-hooks react-apollo

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

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

但是,我想知道如何将data存储到userData。这是应该如何工作的:

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

2 个答案:

答案 0 :(得分:3)

您要如何处理仅通过从查询挂钩中解构的数据而无法完成的返回数据?在大多数情况下,它可以立即使用,因为它在重新获取时会自动更新。

如果有必要(也有可能),如另一个答案所说,您发布的useEffect钩子应该可以工作,但是我会简单地将data替换为依赖项,以防止出现优势响应具有相等的长度(包含不同的数据)并且不会更新的情况:

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

答案 1 :(得分:1)

看起来像您可能拥有的东西。 onCompleted参数中还有一个options选项。它需要一个回调类型:

(data: TData | {}) => void

所以这是另一种方式:

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