I have a block that references a custom post type named faq that has a taxonomy named faq_group. This block has one attribute and makes multiple getEntityRecords
calls. One of the calls has an argument that depends on the previous one:
The attribute:
// the group attribute stores the slug of the selected faq_group slug from a SelectControl component
attributes: {
group: {
type: 'string',
default: '',
},
}
The calls:
// Get all terms from the faq_group taxonomy to fill a SelectControl component (name and slug)
const groups = useSelect( ( select ) =>
select( 'core' ).getEntityRecords( 'taxonomy', 'faq_group', { per_page: -1, orderby: 'name', order: 'asc', _fields: 'id,name,slug' } ),
[]
);
// Get the term object with the same slug as the group attribute
const selectedGroup = useSelect( ( select ) =>
select( 'core' ).getEntityRecords( 'taxonomy', 'faq_group', { per_page: -1, orderby: 'name', order: 'asc', _fields: 'id,name,slug' } )?.find( ( term ) => term.slug === attributes.group ),
[ attributes.group ]
);
// Get posts from the faq custom post type with a faq_group term with id = selectedGroup.id
const faqs = useSelect( ( select ) =>
select( 'core' ).getEntityRecords( 'postType', 'faq', { faq_group: [ selectedGroup?.id ] } ),
[ selectedGroup?.id ]
);
My question is, can this be simplified somehow? Can the multiple calls be combined inside just one useSelect
selector?