reactjs - Dublă destructurare când obiectul principal poate fi nedefinit

În primul rând, întrebarea mea nu este o reluare a dublei destructurări din ES6

Uită-te la următorul cod - Apollo Client GraphQL

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

Ar fi mai frumos să o scrii în felul acesta:

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

Totuși, din păcate am întâmpinat următoarea eroare:

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); 

Înțeleg foarte bine de ce se întâmplă.

Întrebarea mea este: Există vreun truc sintactic pentru a face să funcționeze?

Modificat: Mi s-a adus la cunoștință că există o întrebare destul de similară Destructurarea cu obiecte imbricate și valori implicite

Răspuns #1

Furnizați o valoare inițială pentru data din care să se efectueze destructurarea.

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