在JavaScript Amplify中通过GraphQL查询获取Team关联的嵌套Users数据

问题原因 #

• 语法层面问题：
  1. team.users.username写法错误：team.users是一对多关联的集合结构，并非单个User对象，数组/集合对象本身不存在username属性。
  2. 你写的team.users.map((user) => {user.username})箭头函数语法错误：用大括号包裹函数体时没有显式写return，执行后只会返回undefined，不会输出用户名。
• 数据层面核心问题：
  AWS Amplify 自动生成的listTeams默认查询语句，不会主动拉取一对多关联的users嵌套字段，你拿到的team.users要么是undefined，要么只有关联ID没有完整的用户属性，自然没法读取username。另外Amplify的@connection一对多关联返回的结构是{ items: 实际数组 }，并非直接返回User数组，就算拉到了数据直接遍历team.users也会报错。

修复步骤 #

1. 自定义包含嵌套users字段的GraphQL查询 #

不要用自动生成的默认listTeams，自己声明查询语句，明确指定要拉取的users嵌套属性：

const listTeamsWithUsers = `
query ListTeams {
  listTeams {
    items {
      id
      title
      manager {
        id
        username
      }
      # 明确指定拉取关联的users列表
      users {
        items {
          id
          username
        }
      }
    }
  }
}
`

2. 修改fetchTeams调用，使用自定义查询 #

把原来的listTeams替换成你自己写的查询：

const fetchTeams = async () => {
  try {
    const teamsData = await API.graphql(graphqlOperation(listTeamsWithUsers));
    const teamsList = teamsData.data.listTeams.items;
    setClients(teamsList);
  } catch (error) {
    console.error(`fetchTeams failed.`, error);
  }
};

3. 修改渲染逻辑，适配返回结构 #

注意要遍历team.users.items，同时修正箭头函数语法，加上可选链避免加载时报错、加上React要求的key属性：

{teams.map((team) => {
  return(
    <li key={team.id}>
      {/* 可以先显示团队名区分 */}
      团队：{team.title}，成员：
      {team.users?.items?.map(user => (
        <span key={user.id} style={{marginRight: '8px'}}>{user.username}</span>
      ))}
    </li>
  )
})}

内容的提问来源于stack exchange，提问作者Manny