无效的挂钩调用.钩子只能使用 react-apollo 在函数组件的主体内部调用

Question

我在尝试从公共 graphql API 使用 react-apollo 时收到此错误。

无效的挂钩调用。钩子只能在主体内部调用 函数组件。以下情况之一可能会发生这种情况 原因：

1. 你可能有不匹配的 React 和渲染器版本(例如 React DOM(
2. 你可能违反了钩子的规则
3. 您可能在同一应用程序中有多个 React 副本

我已经阅读了反应文档，我确信问题不是这三个原因之一。

这是一个使用create-react-app的简单项目。react和react-dom版本都是16.10.2.

应用.js：

import React, {useState} from 'react';
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
const query = gql`
{
countries {
name
code
}
}
`;
function App() {
const [country, setCountry] = useState('US');
const onCountryChange = event => {
setCountry(event.target.value);
};
return (
<div className="App">
<Query query={query}>
{result => {
if (result.loading) return <p>Loading...</p>;
if (result.error) return <p>{result.error.message}</p>;
return (
<select value={country} onChange={onCountryChange}>
{result.data.countries.map(country => (
<option key={country.code} value={country.code}>
{country.name}
</option>
))}
</select>
);
}}
</Query>
</div>
);
}
export default App;

索引.js：

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import App from "./app";
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from "react-apollo";
const client = new ApolloClient({
uri: 'https://countries.trevorblades.com'
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);

我是 graphql 和 apollo 的新手，不知道此错误的原因是什么。

更新

正如@Joseph所建议的，我已经从应用程序中提取了一个组件并使用了useQuery，现在代码如下所示：

选择.js：

import React, {useState} from 'react';
function Select(props) {
const [country, setCountry] = useState('US');
const onCountryChange = event => {
setCountry(event.target.value); // already called within the function component
};
return (
<select value={country} onChange={onCountryChange}>
{props.countries.map(country => (
<option key={country.code} value={country.code}>
{country.name}
</option>
))}
</select>
);
}
export default Select;

应用.js：

import React from 'react';
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { useQuery } from '@apollo/react-hooks';
import Select from './select';
const query = gql`
{
countries {
name
code
}
}
`;
function App() {
const { loading, error, data } = useQuery(query);
return (
<div className="App">
<>
{loading && <p>Loading...</p>}
{error &&  <p>{error.message}</p>}
<Select countries={data.countries} />
</>
</div>
);
}
export default App;

index.js没有变化，但我仍然得到同样的错误。

更新 2：

我缺少安装@apollo/react-hooks但是当我安装它时，我现在遇到了一个新错误：

在上下文中找不到"客户端"或作为选项传入。包装 或传递 ApolloClient 中的根组件 VIA选项中的实例。

更新 3：

这越来越长，但我在index.js年从@apollo/react-hooks导入了ApolloProvider来解决最后一个问题：

import { ApolloProvider } from "@apollo/react-hooks";

现在我得到了

类型错误：数据未定义

在app.js的这一行中：

<>
{loading && <p>Loading...</p>}
{error &&  <p>{error.message}</p>}
<Select countries={data.countries} />  // <= This line causes error
</>

Answer 1

我在使用 react-apollo 和用nestjs制作的graphqlAPI 时遇到此错误，我首先尝试了componentWillMount()

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:You might have mismatching versions of React and the renderer (such as React DOM)You might be breaking the Rules of HooksYou might have more than one copy of React in the same app

所以我已经修复了，如下面的代码所示：

首页.js

import { useLazyQuery, useMutation } from '@apollo/client'
import React, { useEffect, useState } from 'react'
import {  GET_ALL_PROJECTS } from '../graphql/Queries'
function Home() {
const [getEmployees, { loading, data, error }] = useLazyQuery(GET_ALL_PROJECTS,
{
variables: {}
});
if (error) {
console.log(error)
}
if (data) {
console.table(data)
}
useEffect(() => {
getEmployees();
}, []);
return (
<div className="home">...</div>
}
export default Home