Reactjs 反应-使用自定义钩子调用另一个钩子-干净的方法？

我正在用next.js在React中编写一个应用程序

我需要执行一个GraphQL查询——我只想执行它并得到结果，但是有问题

因此，如果我像下面那样调用

useQuery

hook，它将返回响应：

import { useQuery } from 'react-apollo';

export function LaunchesFunctionTwo() {
  const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)

  // I see the data I want returned here ok
  console.log(data)

  // I don't need to display anything I just want the data - hence this empty string
  // Infact, thats probably a second question, how can I just use useQuery on its own
  return ''
 
}

但是，如果在索引组件中执行相同的操作，console.log（data）将返回未定义的，如下所示：

import { useQuery } from 'react-apollo';

export default function Index(props) {
  const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)

  // Doing this however returns me undefined
  console.log(data)

   return (<div>...</div>)
}

然后在我的index.js中，我可以简单地调用

useLaunchesFunctionTwo

来获取我的数据

所以现在的问题是——这是一种有效的工作方式吗。我是否可以将代码组织得更清晰一些

---

感谢您的帮助。

看起来您没有在索引中导入useQuery

import { useQuery } from 'react-apollo';

---

看起来您没有在索引中导入useQuery

import { useQuery } from 'react-apollo';

---

useQuery不是异步的吗？useQuery不是异步的吗？