Модуляризация запросов gql и функций резолвера в реагирующем интерфейсе

Question

Итак, я получил свой gql apollo-client и работал прямо сейчас. Я собирался экспортировать запросы и функцию распознавателя на стороне внешнего интерфейса из внешних модулей, чтобы сохранить код в чистоте.

Смотрите, при написании моего кода, подобного этому, я получу доступных игроков по назначению:

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

export const GET_ALL_PLAYERS = gql`
  query allPlayers {
    allPlayers {
      id
      name
      nickname
    }
  }
`;

function DebugPage(props) {
  const { loading, error, data: playerData } = useQuery(
    queries.GET_ALL_PLAYERS
  );

  if (loading) return <div>Loading...</div>;
  if (error) return console.log(`Error! ${error.message}`);

  return (
    <div>
      <h1>Player</h1>
      {playerData.allPlayers.map(player => {
        return (
          <div key={player.id}>
            <h2>{player.name}</h2>
            <p>id: {player.id}</p>
            <p>name: {player.name}</p>
            <p>nickname: {player.nickname}</p>
          </div>
        );
      })}
      <h1>Image</h1>
      <h1>Game</h1>
    </div>
  );
}

export default DebugPage;

Итак, я хочу добавить отдельные части во внешние файлы.

import gql from 'graphql-tag';

export const GET_ALL_PLAYERS = gql`
  query allPlayers {
    allPlayers {
      id
      name
      nickname
    }
  }
`;

Поместить приведенную выше часть в файл, который называется query. js:

import { useQuery } from '@apollo/react-hooks';
import * as queries from './queries';

export function getAllPlayers() {
  const { loading, error, data } = useQuery(queries.GET_ALL_PLAYERS);

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

  return data;
}

И поместите содержимое выше в функцию getAllPlayers () в средствах разрешения файлов. js

, а затем обработайте это в моем коде компонента функции, например:

import React from 'react';
import { getAllPlayers } from '../../gql/resolvers';

function DebugPage(props) {
  const playerData = getAllPlayers()
  return (
    <div>
      <h1>Player</h1>
      {playerData.allPlayers.map(player => {
        return (
          <div key={player.id}>
            <h2>{player.name}</h2>
            <p>id: {player.id}</p>
            <p>name: {player.name}</p>
            <p>nickname: {player.nickname}</p>
          </div>
        );
      })}
      <h1>Image</h1>
      <h1>Game</h1>
    </div>
  );
}

export default DebugPage;

Я вижу что мой компонент функции опрашивает мой бэкэнд в консоли. Однако компонент функции приведет к ошибке в браузере, сообщающей, что playerData не определена. Таким образом, функция не возвращает данные правильно.

Вот изображение ошибки:

Что-то, что я не учел?

Спасибо за любые рекомендации заранее. С уважением,

Патрик