@apollo/client 错误 - 在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook“useQuery”

Question

当我使用 @apollo/client 进行 graphql api 调用时出现以下错误

React Hook“useQuery”在函数“graphqlService”中调用，该函数既不是React函数组件，也不是自定义React Hook函数react-hooks/rules-of-hooks

索引文件：

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;