主对象可能未定义时的双重解构

Question

首先我的问题不是重述ES6双重解构

看下面的代码——Apollo客户端GraphQL

import { gql, useQuery, useMutation } from '@apollo/client';
...
const { loading, error, data } = useQuery(TREATMENTS);

这样写会更好：

   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);

但是，不幸的是我遇到了以下错误：

TypeError: Cannot read property 'treatments' of undefined
TreadDetails
C:/Users/albertly/Downloads/git/individual-claims/src/TreatDetails.tsx:35

  32 | `;
  33 | 
  34 | function TreadDetails(): React.ReactElement {
> 35 |   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);
  36 |  // const [treatments, setTreatments] = useState<Treatment[]>([]);
  37 |   const { state: stateApp, dispatch: dispatchApp } = useContext(AppContext); 

我完全理解为什么会发生这种情况。

我的问题是：是否有一些语法技巧可以使其发挥作用？

编辑： 引起我注意的是，有一个非常相似的问题 Destructuring withnestedobjectsanddefaultvalues

Answer 1

提供一个初始值来data进行解构。

const { loading, error, data: { treatments } = {} } = useQuery(TREATMENTS);