调用 Apollo useQuery() 时出现 React Hook 错误答案

【问题标题】：React Hook error when calling the Apollo useQuery()调用 Apollo useQuery() 时出现 React Hook 错误
【发布时间】：2020-04-13 10:52:26
【问题描述】：

我在尝试使用 useQuery() 时遇到以下错误。如果您需要更多详细信息，请告诉我..

错误：无效的挂钩调用。钩子只能在体内调用的一个功能组件。这可能发生在以下情况之一原因： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用程序中拥有多个 React 副本有关如何调试和解决这个问题。

我的代码如下...

get-characters-action.js

import React from "react";
import * as ACTION_TYPES from "./../constants/action-types";
import { useQuery } from "@apollo/react-hooks";
import gql from 'graphql-tag';

export const getCharactersSuccess = (data) => {
    return {
        type:ACTION_TYPES.LOAD_CHARACTERS_SUCCESS,
        data
    }
}

export const getCharactersInProgress = () => {
    return {
        type:ACTION_TYPES.LOAD_CHARACTERS_INPROGRESS
    }
}

export const getCharactersError = (error) => {
    return {
        type:ACTION_TYPES.LOAD_CHARACTERS_ERROR,
        error
    }
}

const GET_CHARACTERS =gql`
{
    allPersons {
        name
        gender
        homeworld {
            name
        }
        species {
            name
            language
            classification
        }
    }
}`;

export const useGetCharacters= () => {
    const { loading, error, data } = useQuery(GET_CHARACTERS);

    if(loading) {
        getCharactersInProgress();
    }

    if(error) {
        getCharactersError(error);
    }

    if(data) {
        getCharactersSuccess(data);
    }
}

context-state-config.js

export const ContextState = (props) => {
    // const [stateReducer, dispatchReducer] = useReduceWithLogger(Reducer.AppLoadingReducer,Reducer.initialState);
    const [stateReducer, dispatchReducer] = useReducer(Reducer.MainReducer,Reducer.initialState);

    const handleDispatchAppLoadingInProgress = () => {
        dispatchReducer(GENERIC_ACTION.appLoadingInprogress());
    }

    const handleDispatchAppLoadingSuccess = () => {
        dispatchReducer(GENERIC_ACTION.appLoadingSuccess());
    }

    // const getCharacters = () => {
    //     dispatchReducer(GET_CHARACTERS_ACTION.useGetCharacters());
    // }

    const graphqlClient = new ApolloClient({
        uri: "https://swapi.graph.cool/"
    });

    return (
        <div>
            <ApolloProvider client={graphqlClient}>
                <Context.Provider
                    value={{
                        // reducer
                        isAppReady: stateReducer.isAppReady,
                        dispatchAppLoading: () => handleDispatchAppLoadingInProgress(),
                        dispatchAppLoaded: () => handleDispatchAppLoadingSuccess(),
                        // get character action
                        getCharacters: () => dispatchReducer(GET_CHARACTERS_ACTION.useGetCharacters())
                    }}
                >

                        {
                            props.children
                        }
                </Context.Provider>
            </ApolloProvider>
        </div>
    )
}

【问题讨论】：

标签： react-hooks apollo-client react-context react-apollo-hooks

【解决方案1】：

你不能在另一个函数中调用你的GET_CHARACTERS_ACTION.useGetCharacters()，它就像自定义反应钩子，应该只在你的函数反应组件中调用。

【讨论】：