Estoy tratando de hacer una solicitud useQuery simple, pero las variables de las que dependo para la solicitud se cargan de forma asíncrona. Mis disculpas de antemano por el tipo de nombres de variables desordenados.
Actualmente tengo un gancho useQuery que quiero que funcione así.
const { id } = router.query; let userDbAddress; useEffect(() => { async function getUsernameEthAddress() { userDbAddress = await getUserAddressFromUsernameDb(id); } getUsernameEthAddress(); return () => (mountedRef.current = false); }, [router.isReady]); let userVariables = { where: { id: userDbAddress, }, }; const { loading, error, data } = useQuery(GET_USER_DATA, { variables: userVariables, //<<<I AM NULL (because running before async useEffect completes!) }); if (loading) return null; if (error) return <Error statusCode={404} />; const myData = data?.myData;Mi problema es que lo asincrónico está en el ordenamiento de mis datos. El userDbAddress es nulo cuando se llama a useQuery y no estoy seguro de cuándo puedo pasarlo mejor al parámetro de variables para mi consulta. No estoy seguro de si este es el caso de uso adecuado para useLazyQuery. Quiero que mi consulta se ejecute en la representación de la página justo después de que se ejecute el enlace useEffect para poder conectar la variable userDbAddress para pasar al enlace useQuery.
Gracias por tomarte el tiempo:)
Y feliz de aclarar si la pregunta es demasiado complicada/prolija
Esto es react-query , ¿verdad?
Si es así, hay un tercer parámetro para establecer opciones para la consulta. Simplemente agregue { enabled: false } como una opción en ese tercer parámetro y la consulta no se activará de inmediato. En segundo lugar, extraiga la función de refetch del objeto devuelto por useQuery() . Luego, una vez userVariables tenga datos válidos (puede crear un useEffect() para esto), puede llamar a refetch() y su flujo de trabajo esperado funcionará ahora.