如何有条件地调用 useQuery 钩子？

Question

由于Hooks的规则，不应有条件地调用 hooks。那么如何使用 有条件地获取数据useQuery呢？例如，假设我想在功能组件中获取数据，但前提是someState === someValue? 即我想避免useQuery()在任何条件之前调用，因为在这些时间获取数据没有意义。

Answer 1

您还可以使用 useQuery 选项的启用属性进行条件查询。

 // Get the user
 const { data: user } = useQuery(['user', email], getUserByEmail)

 const userId = user?.id

 // Then get the user's projects
 const { isIdle, data: projects } = useQuery(
 ['projects', userId],
 getProjectsByUser,
  {
    // The query will not execute until the userId exists
    enabled: !!userId,
  }
 )

Answer 2

在阿波罗的文档中，它表明您可以添加一个跳过选项：useQuery(query,{skip:someState===someValue})

否则，您也可以useLazyQuery在希望运行时运行查询而不是立即运行。