Tengo una consulta de Apolo:
const { error, loading, data: user } = useQuery(resolvers.queries.ReturnUser, { variables: { userId: parseInt(id) }, }); El objeto de datos devuelto por la consulta tiene otro objeto llamado returnUser . Así que el objeto real es:
data: { returnUser: { name: 'Some Name' } }En mi JSX quiero generar los datos:
return ( <div> { user ? <p>Profile {user.returnUser.name}</p> : <div>User not found</div> } </div> ); Como puede ver, necesito acceder al objeto returnUser en el objeto de user para obtener los datos reales del usuario. Esto no es genial. ¿Hay alguna forma de desestructurar el objeto de data de useQuery para poder asignar el objeto anidado al user ?
//editar: si bien esto parece una pregunta duplicada, la respuesta es diferente debido a la naturaleza asíncrona de useQuery . Si no establece un valor predeterminado, obtendrá un error.
Obtuve la respuesta gracias a @Pilchard:
const {error, loading, data: {returnUser: user} = {}} = useQuery(resolvers.queries.ReturnUser, { variables: {userId: parseInt(id)}, });Puede seguir el mismo anidamiento mientras deconstruye los datos.
p.ej
const data = { anotherLevel: { returnUser: { name: 'Some Name' } } } const { anotherLevel: {returnUser: { name }}} = data; console.log(name); // prints Some Name