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

Question

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

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

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

我已阅读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 所建议的，我已经从 app 中提取了一个组件并使用了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 实例。

更新3：

这已经很长了，但我已经ApolloProvider从@apollo/react-hooksin导入index.js来解决最后一个问题：

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 和graphql用 制作的API时nestjs，我遇到了这个错误，我先尝试过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