Tengo una función asíncrona y quiero usarla para consultar y devolver un valor, algo como esto:
async function checkProfileFeature(values: any) { const data = await client.query<any>({ query: PROFILE_QUERY, variables: { userId: 1, profileId: values.id }, }); if(something) { return true } }Según este valor de retorno, quiero mostrar o no mostrar un campo:
{checkProfileFeatures(profile) === true && ( <Input .... /> )}Desafortunadamente, no puedo hacer que devuelva el valor y muestre el campo en su resultado al mismo tiempo. ¿Hay una manera recomendada de hacer esto?
checkProfileFeature tiene una palabra clave async que básicamente significa que devolverá una Promesa, en su caso Promise<boolean | undefined> (ya que devuelve true solo si se cumple una determinada condición). checkProfileFeatures(profile) === true nunca será verdadero porque, como ya mencioné, su función devuelve una Promesa. Lo que quiere hacer es poner su checkProfileFeatures dentro de un useEffect y luego almacenar los resultados de la consulta dentro de una tienda de algún tipo o useState
// Run on first render useEffect(() => { const fetchQuery = async () => { await checkProfileFeature({}); } fetchQuery(); }, []) Luego, dentro de checkProfileFeature guarda tus resultados
async function checkProfileFeature(values: any) { const data = await client.query<any>({ query: PROFILE_QUERY, variables: { userId: 1, profileId: values.id }, }); if(something) { setSomethingHappened(true); } }Y a cambio del cuerpo puede usar este valor obtenido
{somethingHappened === true && ( <Input .... /> )}Por supuesto, aún debe descubrir cómo manejar el estado de carga, es posible que desee crear un estado adicional que le indique si la solicitud aún se está ejecutando.