Как извлечь данные из объекта в компонент запроса Apollo

Question

Пытается извлечь данные из API GraphQl и не может использовать map(), поскольку данные возвращаются как объект.
Я получаю желаемые результаты на сервере Apollo (на основе моей схемы), хотя.

Вот что я получаю после выполнения кода:
data.getRandomMeal.map is not a function

При отладке написано data = { getRandomMeal {...} }

<Query
  query={
    gql`{
      getRandomMeal {
        idMeal
        strMeal
      }
    }`
  }
>
  {({ data }) => { 
    if (data === undefined) return null; 
    return (
      <ul>
        {data.getRandomMeal && data.getRandomMeal.map(meal => (
          <li key={meal.idMeal}>{meal.strMeal} </li>
        ))}
      </ul>
    );
  }}
</Query>

const typeDefs = gql`
  type Meal{
    idMeal: ID
    strMeal: String
    strTags: String
    strCategory: String
  }

  type Query {
    getRandomMeal: Meal
  }
`;

const resolvers = {
  Query: {
    getRandomMeal: async (_, __, { dataSources }) =>
      dataSources.RandomRecipe.getRandomMeal()
  }
};

Datasource:

class RandomRecipe extends RESTDataSource{
  constructor() {
    super();
    this.baseURL = 'https://www.themealdb.com/api/json/v1/1/random.php'; 
  }

  async getRandomMeal(){
    const meal = await this.get('/');
    return meal.meals[0];
  }
};

module.exports = RandomRecipe;

Answer 1

const meal = await this.get('/');

в связи с

this.baseURL = 'https://www.themealdb.com/api/json/v1/1/random.php';

результатов с неправильным URL

'https://www.themealdb.com/api/json/v1/1/random.php/'

Достаточно использовать пустую строку в

const meal = await this.get('');

Ответ можно использовать напрямую, без использования карты:

    {({ data })  => {

      if (data === undefined) return null; 
      const meal = data.getRandomMeal;

      return (
        <ul>
          {meal && (
            <li key={meal.idMeal}>{meal.strMeal} </li>
          )}
        </ul>
      );
    }}