@apollo/客户端错误-React Hook "useQuery" 在函数中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数

Question

当我使用@apolo/client 进行graphql-api调用时，我得到了以下错误

React Hook"；useQuery"在函数"中被调用；graphqlService"；既不是React功能组件，也不是自定义的React Hook功能React Hook/钩子规则

索引文件：

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: "http://localhost:3008",
cache: new InMemoryCache()
});
ReactDOM.render(
<ApolloProvider client={client}>
<App/>
</ApolloProvider>,       
document.getElementById('root')
);

功能组件文件：

import React from 'react';
import {  
useQuery,
gql
} from "@apollo/client";
import Schema from '../models/schema';
function graphqlService( params : any = {} ) {
const query = Schema.getPanelData;
const { data } = useQuery(query, {variables: params});
if (data) return data;     
}

导出默认的graphqlService；

类组件文件：

this.data = graphqlService(params);

我不认为这是包中的问题，我在POC项目中使用相同的包。在那里，它运行得很好。唯一的区别是我把所有的代码都写在同一个文件里，这里我写了两个不同的文件。

Answer 1

我在一个功能组件中遇到了同样的问题，这肯定是正确的。我通过使用大写字母作为组件名称来修复此错误消息。

官方文件中描述了为什么需要大写字母

示例：

import React from "react";
import Query from "./Query";
import { useQuery } from "@apollo/client";
const ComponentName = () => {
const { loading, error, data } = useQuery(Query);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
...
);
};
export default ComponentName;

Answer 2

useQuery钩子只能在react组件中调用(cf:https://www.apollographql.com/docs/react/data/queries/)