useQuery返回dataCategories可打印，访问allCategories报undefined如何解决

问题根因 #

Apollo Client的useQuery是异步执行的，组件首次渲染时分类查询请求还未收到服务端返回，此时返回的dataCategories默认值为undefined。你直接打印dataCategories时浏览器控制台展示的是对象引用，等请求完成后控制台会自动更新对象内容，才会让你误以为打印时就有完整数据，实际同步访问dataCategories.allCategories时，dataCategories还处于未赋值的初始状态，自然会抛出undefined错误。

解决方案 #

你只需要做好异步请求的状态判断和属性访问兜底即可：

• 优先处理loading和error状态，请求未完成/请求失败时，不渲染依赖分类数据的组件
• 访问数据属性时使用可选链?.兜底，避免undefined访问报错

代码修改参考 #

1. 访问属性的代码添加可选链：

// 打印语句修改
console.log(dataCategories?.allCategories)

2. Autocomplete组件部分修改，添加状态判断或者属性兜底：

{/* 方法1：请求完成后再渲染组件 */}
{!loadingCategories && !errorCategories && (
  <Autocomplete
    multiple
    id="tags-outlied"
    options={dataCategories.allCategories}
    getOptionLabel={(option) => option.label}
    filterSelectedOptions
    renderInput={(params) => (
      <TextField
        {...params}
        label="Kategorien"
        placeholder="Kategorien"
      />
    )}
  />
)}

{/* 方法2：直接用可选链兜底options，不用额外判断 */}
<Autocomplete
  multiple
  id="tags-outlied"
  options={dataCategories?.allCategories || []}
  getOptionLabel={(option) => option.label}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Kategorien"
      placeholder="Kategorien"
    />
  )}
/>

如果修改后还是有问题，可以打印errorCategories排查是否是查询请求本身出现了异常，比如跨域、权限、请求头配置错误等问题。

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