Question

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

我有一个需要执行的GraphQL查询-我只想执行它并获取结果，但是有问题。

因此，如果我像下面这样调用useQuery钩子，它将返回响应：

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 ''
 
}

但是，即使在Index组件中，我也是如此，console.log（data）返回undefined，如下所示：

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>)
}

更新：我得到了这个工作。我读到我们可以使用Hooks的仅有的两个地方之一是：Call Hooks from custom Hooks。

所以我像这样制作了一个自定义钩子：

根据文档，use关键字是必需的：

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

  return data
}

然后在我的index.js中，我可以简单地调用那个useLaunchesFunctionTwo来获取我的数据。

所以现在的问题-这是一种有效的工作方式。我可以对代码进行更清晰的组织了吗？

任何帮助表示赞赏。

Answer 1

好像您没有在索引中导入useQuery

import { useQuery } from 'react-apollo';

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

1 个答案: