How do I deconstruct multiple levels within a useSanityQuery() variable

[toddpadwick]

Hello!

I have a single GROQ query containing three sub-queries:

{
    'entry':*[_type == "productIndex"][0]{
        ...
    }
    'gender':*[_type == "gender" && slug.current == "women"][0]{
	...
    }
    'collection':*[_type == "collection" && store.slug.current == "t-shirts"][0]{
	... 
    }
}

I have set up the following query:

    const { pending, data, error } = useSanityQuery(query);

This returns the following:

This works however, to get access to the containing gender, entry and collection as their own refs, I would like to deconstruct the data. I have tried this:

    const { pending, data:{entry,collection,gender}, error } = useSanityQuery(query);

I thought this would work but it returned null, and I expect this is because they are proxy values. So how best can I achieve this?

I have tried, setting refs initially and then assigning them after the query is complete, however, this causes race conditions and intermittently catches errors. it is also inefficient as it means there is a ref within a ref:

   let entry = ref(null);
  let gender = ref(null);
  let collection = ref(null);

    const { pending, data, error } = useSanityQuery(query);


if (data) {
    entry.value = data.value?.entry ? data.value.entry : null;
    gender.value = data.value?.gender ? data.value.gender : null;
    collection.value = data.value?.collection ? data.value.collection : null;
}
 

Thanks in advance for your help :)