Disculpas porque soy bastante nuevo en React y no pude encontrar la respuesta al buscar, pero acepto que podría estar usando esto mal.

Tengo varias páginas que utilizan useQuery de Apollo y cuando la variable "cargar" es falsa, puede procesar los datos y renderizar, lo cual es bastante fácil.

Sin embargo, quiero crear un nuevo archivo llamado GetCustomerID.jsx y tener una función de flecha que, cuando se proporciona con una identificación de usuario, ejecutará una consulta gql y devolverá el valor de la identificación del cliente. No renderizar componentes, solo devolver el valor.

El problema es que una vez que se llama desde otra página, siempre devuelve "cargando"

 const myQuery = gql` query GetCustomerID($id: ID!) { user(id: $id) { data { id attributes { customer { data { id } } } } } } `; const GetCustomerID = () => { const [userId, setUserID] = useState(localStorage.getItem("userid")); const [custId, setCustId] = useState(); const { loading, error, data } = useQuery(myQuery, { variables: { id: userId } }); if(loading){ return "loading" } if (error) { console.log(error); return "error"; } setCustId(data.attributes.customer.id); console.log(custId); return custId; };

Llamar desde otro lugar:

 const [custId, setCustId] = useState(); let myVal = GetCustomerID(); setCustId(myVal)

Cualquier ayuda sería muy apreciada y si estoy malinterpretando useQuery para lo que estoy tratando de lograr, entonces disculpas