Estoy tratando de encontrar una manera de corregir el error de representación de Hook. Tengo un total de 3 ganchos useQuery siendo renderizados:
const { data: OSData, error: OSError, loading: OSLoading, } = useQuery(OSData, { variables: { NUMBER: UniqueList, }, }) const { data: RamData, error: RamERROR, loading: RamLOADING, } = useQuery(GET_Ram) const { data: Hardware, error: HardwareERROR, loading: HardwareLOADING, } = useQuery(GET_Hardware)La variable 'NÚMERO' se basa en una lista 'UniqueList' que se crea a partir de las consultas GET_Ram y GET_Hardware, por lo que la consulta OSData debe llamarse más tarde o hay una variable no definida. Sin embargo, llamar a OSData Query más adelante en el código me da un error de representación.
¿Alguna idea sobre cómo podría lograr esto?
¡Gracias!
una respuesta que encontré es usar una consulta perezosa.
const SomeData [{ called, loading, data }] = useLazyQuery(OSData) }) if (called && loading) return <p>Loading ...</p> if (HardwareLOADING || RamLOADING) return <p> loading</p> if (HardwareERROR || RamERROR) return <p>error</p> //perform all the needed calculations for the variable herey en la declaración de devolución puede llamar a la consulta y proporcionar la variable. Aquí uso un botón.
<div> <button onClick={() => SomeData({ variables: { NUMBER: uniqueList } })}> Load{' '} </button> </div>Espero que esto ayude a alguien