Reactjs React Query useQuery挂钩引发错误→；反应挂钩/挂钩规则

我有一个示例组件，如下所示。我正在尝试使用React查询从端点（Graphql）获取数据。我有一个定制的钩子，我也在下面列出了

const App =(props)=>{  
if (me && me.token) {
    let headers = {
        Authorization: me.token,
    }
    const { loading, error, data } = useGQLQuery('getUploads', GetUploadedFiles, headers)
    let tableData = []
    if (data && data.uploads) {
      tableData = data.uploads
    }
  } else {
    message.info("You need to be logged in to manage your assets!")
    return;
  }
}

定制挂钩→

export const useGQLQuery = (key, query, variables,headers={}, config = {}) => {
  let gqlClient = new GraphQLClient(endpoint)
  const fetchData = async () => gqlClient.request(query, variables, headers)
  return useQuery(key, fetchData, config)
}

我想在标题中传递当前用户的令牌信息

到目前为止还不错

现在，每当我试图加载这个组件时，我都会得到以下错误

React Hook "useGQLQuery" is called conditionally. 
React Hooks must be called in the exact same order in every component render. 
Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

我需要传递当前用户的令牌，这就是我这样做的原因

if (me && me.token) {
    let headers = {
        Authorization: me.token,
    }
    const { loading, error, data } = useGQLQuery('getUploads', GetUploadedFiles, headers)

但这是所有问题发生的地方

你能让我知道我该怎么做，我在这里想做什么吗。 任何例子的帮助都会有很大的帮助

---

谢谢

您正在调用if条件中的钩子。我不允许这样。它需要在每次重新渲染时使用一致的钩子调用来跟踪更改。 您需要修改

useGQLQuery

hook，以便它在内部处理逻辑条件，如

me&&me.token

下面解释了为什么不能从if条件调用钩子：