Estoy tratando de pensar en una arquitectura de infraestructura para implementar y usar en mi aplicación. Básicamente tengo una página con múltiples componentes. ingrese la descripción de la imagen aquí

los filtros y las opciones de filtro se obtienen de una API como esta:

 const filter1 = [ { id: "id", name: "OPTION 1", }, { id: "id2", name: "OPTION 2", }, ];

Los siguientes componentes deben enviar una solicitud de API a cada uno de ellos con los filtros seleccionados.

La solicitud de componentes iniciales debe realizarse solo cuando los filtros y sus valores predeterminados estén configurados para que la solicitud de API para obtener los datos del componente se realice con los filtros correctos.

Hasta ahora, traté de pensar en ContextProvider, que almacenará todos los estados de mis filtros, y luego todos los componentes que lo usen usarán el contexto y el estado para realizar una llamada a la API.

Pero todavía hay algunos problemas con él, 1: necesito pensar en una forma de establecer todos los valores predeterminados de los filtros tanto en ContextProvider como en el estado del filtro para presentar el valor predeterminado seleccionado. 2. Necesito evitar que los componentes realicen una solicitud de API hasta que todos los valores predeterminados se completen en ContextProvider y se muestren en los filtros.

los valores predeterminados también deben provenir de la API.

¿Estoy siquiera pensando en ello de la manera correcta? ¿Qué me estoy perdiendo para que sea sensato y fácil de codificar?