如何从对象中提取数据到 Apollo Query 组件中

Posted 2023-03-10

【中文标题】如何从对象中提取数据到 Apollo Query 组件中

【英文标题】：How to extract data from an object, into Apollo Query component

【发布时间】：2019-09-23 14:04:05

【问题描述】：

尝试从 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;

【问题讨论】：

提供数据样本

我添加了一些信息。希望有用。

这不是graphql api - 试试console.log( data.getRandomMeal ) - 也许你需要查询getRandomMeal. meals idMeal ...

console.log( data.getRandomMeal ) 返回未定义。调整查询会使服务器崩溃。到目前为止一切都很顺利°_°

console.log(data)?提供 typdefs/schema 和解析器`

【参考方案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('');

可以直接使用response，不用map：

    ( data )  => 

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

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