使用 useState 存储来自 useQuery 的数据

Question

我正在使用 React hooks 来使用react-apollo获取 GraphQL 数据并存储本地 state：

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

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

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

Answer 1

您只想将其用作从查询挂钩中解构的数据，该如何处理无法完成的返回数据？ 在大多数使用情况下，可以立即使用它，因为重新获取时会自动更新。

如另一个答案所说，如果有必要（也有可能），您发布的useEffect钩子应该可以工作，但是我将用简单的data替换依赖项，以防止出现边长相等的情况，即响应长度相等，包含不同数据并且不会更新：

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

Answer 2

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

(data: TData | {}) => void

所以这是另一种方式：

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

Answer 3

我认为这样的事情会起作用 - 您需要使用 useState 创建初始状态，可能是空数组，然后在 useQuery 中的 onComplete 将 setTranscationsData ... every render when state or props change它会在every render when state or props change触发。 当然可以在 useState 中添加一个初始状态，它不是一个空数组。

const [transactionsData, setTransactionsData] = React.useState([]);

const { error, data } = useQuery(GET_TRANSACTIONS, {
  onCompleted: () => {
    setTransactionsData(data.transactions);
  },
});

Answer 4

使用onSuccess

const [userData, setUserData] = useState({})
const { data, isLoading, error } = useQuery('QueryKey', QueryFunction, { onSuccess: setUserData })

此onSuccess回调 function 将在查询成功获取新数据时自动为您触发setUserData(data) 。

Answer 5

如上所述，您不能使用 onSuccess/onSettled，因为如果数据被缓存，它们将不会重新运行，因此如果您离开组件并在查询过期之前返回，您的数据将不会被设置。