如何从对象中提取数据，转到阿波罗查询组件中

Question

尝试从GraphQl API提取数据，并且由于数据被返回为对象，因此无法使用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()
  }
};

数据源：

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('');

可以直接使用响应，而无需使用MAP：

    {({ data })  => {
      if (data === undefined) return null; 
      const meal = data.getRandomMeal;
      return (
        <ul>
          {meal && (
            <li key={meal.idMeal}>{meal.strMeal} </li>
          )}
        </ul>
      );
    }}