Вызов хука только один раз перед визуализацией компонента (Meteor/React/Apollo/Graphql)

Я пытаюсь создать ленту вещей, которая обновляется, когда вы проводите пальцем вниз. Моя логика заключается в том, что мне нужно получить необходимые данные перед рендерингом канала, и я буду получать новые данные каждый раз, когда нажимаю n-й элемент, когда я пролистываю страницу. Поэтому я подумал о том, чтобы иметь логическую переменную состояния для обнаружения первого рендеринга, а затем установить для нее значение false, чтобы не запускать запрос снова.

const Feed = (props) => {
    const [feedArray, setFeedArray] = useState([]);
    const [firstRender, setFirstRender] = useState(true);
    const FEED_QUERY = gql`
      query getFeedArray {
        getFeedArray
      }
    `;

    if (firstRender) {
      const { loading, error, data } = useQuery(FEED_QUERY);
      if (loading) return <Loading/>;
      if (error) return `Error! ${error}`;
      feedArray.push(...data.getFeedArray);
      setFirstRender(false);
    }

    return (
      <RenderredComponent />
    );
}
export default withApollo(withRouter(Feed));

Понятно, что это приводит к ошибке (Unexpected Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.), поскольку хук useQuery вызывается только один раз в операторе if.

Я экспериментировал с разными способами сделать это, так как мне нужны эти данные перед визуализацией моего компонента. Я пробовал useEffect() с props.client.query(), но это не сработало, так как это позволяет выполнять gql-запрос синхронно и, следовательно, только обновляет DOM данными при втором рендеринге, и я не могу заблокировать рендеринг на основе состояния loading. Я не могу поместить useQuery() в useEffect(), так как это тоже выдает ошибку (хук внутри хука).

Если я помещу хук useQuery вне оператора if, он сработает, но запускается при каждом рендеринге, что является ненужным дополнительным вызовом. Для контекста: рендеринг происходит часто, когда я прокручиваю вниз из-за того, как работает React Swipeable Views.

Проще говоря, как я могу запустить хук useQuery только один раз, до того, как компонент будет отрендерен?

Любая помощь приветствуется, спасибо!

Обновлено: Скриншоты ниже, чтобы проиллюстрировать, что происходит,

На первом скриншоте показано, когда он рендерится, и я вывожу полученные данные в консоль. Я жестко запрограммировал массив из 5 элементов, который будет возвращаться при повторении для этого примера. Затем, когда я прокручиваю вверх, компонент перерисовывается, хотя мне НЕ нужно извлекать больше данных, но это потому, что срабатывает хук useQuery. Это просто будет продолжать извлекать больше данных, потому что компонент будет постоянно перерисовываться.

Кроме того, мне нужно хранить свои данные в состоянии, потому что я буду добавлять к ним, и у моего компонента нет другого способа запомнить, что было получено в предыдущий раз.

EDIT2: принятый ответ работает. Но у меня было неправильное представление о том, как работает useQuery, я должен был вести журнал на сервере всякий раз, когда вызывался запрос. Это вызывает запрос один и только один раз, несмотря на все обновления DOM. Кроме того, он добавляет его в мое состояние только один раз, потому что после первого успешного рендеринга состояние firstRender устанавливается в false. Не уверен, что это идеально, но это то, что я бы сделал, если бы подумал о регистрации вызовов на своем сервере.

const Feed = (props) => {
    const [feedArray, setFeedArray] = useState([]);
    const [firstRender, setFirstRender] = useState(true);
    const FEED_QUERY = gql`
      query getFeedArray {
        getFeedArray
      }
    `;

    const { loading, error, data } = useQuery(FEED_QUERY);
    if (loading) return <Loading/>;
    if (error) return `Error! ${error}`;
    
    if (firstRender) {
      feedArray.push(...data.getFeedArray);
      setFirstRender(false);
    }

    return (
      <RenderredComponent />
    );
}
export default withApollo(withRouter(Feed));