Как объединить ловушки React (useContext, useEffect) с реагирующими ловушками Apollo (useQuery)

Question

Я пытаюсь создать простой компонент, который возвращает все мои организации с сервера Apollo GraphQL (запрос). Я хочу отобразить все эти организации из состояния контекста, где он может быть размещен с помощью метода отправки после монтирования компонента (обработано useEffect hook).

useEffect hook должен вызывать функцию getOrganizations , а затем вызывать пользовательский hook useGetOrganizations , если результат состояния (массив организаций) пуст. useGetOrganisations ловушка использует useQuery из @ apollo / Reaction-hooks.

К сожалению, это не работает, и моя консоль говорит, что "./src/components/Organisations/Organisations.js Строка 32:13: React Hook "useGetOrganisations" вызывается в функции "getOrganisations", которая не является ни компонентом функции React, ни пользовательской функцией React Hook реагировать на крючки / правила-ловушки "

Пожалуйста, вы можете мне помочь?

    import React, { useEffect } from 'react';
    import { useQuery } from '@apollo/react-hooks';

    import ORGANIZATIONS_QUERY from './OrganizationsGraphql';
    import { Store } from '../../store/Store';

    const Organizations = props => {
        const { state, dispatch } = React.useContext(Store);

        useEffect(() => {
            getOrganizations();
        });

        const useGetOrganisations = async () => {
            const { data, loading, error } = useQuery(ORGANISATIONS_QUERY);

            if (loading) {
                return 'Loading...';
            }
            if (error) {
                return `Error! ${error.message}`;
            }

            return dispatch({
                type: 'FETCH_ORGANISATIONS',
                payload: data.organizations,
            });
        };

        const getOrganizations = () => {
            if (state.organizations.length === 0) {
                useGetOrganizations();
            }
        };

        return (
            <div>
                <h1>All organisations</h1>
                {console.log(state.organizations)}
            </div>
        );
    };

    export default Organizations;