如何对Apollo useQuery返回的嵌套数据进行解构，直接获取内层用户对象

嵌套对象解构+逐层设置默认值即可满足需求，既可以直接拿到内层returnUser数据，也能适配useQuery异步加载时的空值场景。

修改后的查询代码 #

const { 
  error, 
  loading, 
  data: { returnUser: user } = {} 
} = useQuery(resolvers.queries.ReturnUser, {
  variables: { userId: parseInt(id) },
});

语法说明 #

• 用嵌套解构语法将data.returnUser属性直接重命名为user变量
• 给外层data设置默认值{}，避免查询未完成时data为undefined，解构内层属性时报错

简化后的JSX代码 #

return (
  <div>
    { user ?
      <p>Profile {user.name}</p> :
      <div>User not found</div> }
  </div>
);

极端场景适配 #

如果接口存在returnUser本身返回null/undefined的情况，可以给内层属性也加默认值，进一步提升稳定性：

const { 
  error, 
  loading, 
  data: { returnUser: user = null } = {} 
} = useQuery(resolvers.queries.ReturnUser, {
  variables: { userId: parseInt(id) },
});

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