Cómo configurar metadatos asincrónicos de Nuxt SSR en un componente de clase de TypeScript? Haciendo una solicitud utilizando Apollo.
Estoy tratando de establecer metadatos de página en Nuxt después de obtener los datos, pero lo estoy haciendo dentro de un componente de clase. Para empeorar las cosas, estoy obteniendo los datos usando Apollo. Hay muchos ejemplos para usar asyncData, como aquí, y la documentación tiene información sobre la obtención de datos. Sin embargo, me encuentro con que 1) no puedo acceder a los datos, o 2) no puedo usar this.$apollo.query, si hago cualquiera de estas cosas dentro de un componente de clase. Esto es lo que tengo hasta ahora basado en respuestas de SO y documentación.
Problema con Apollo:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
head(): Record<string, unknown> {
return { title: this.response.title }
},
async asyncData(): Promise<any> {
const response = this.$apollo.query({ // <-- no funciona
query: SITE_PAGE,
variables: {
path: this.$route.path
}
});
return { response }
},
})
export default class StandardPage extends Vue {}
</script>
Si solo llamo al servidor en lugar de a Apollo para obtener los datos, aquí está el problema con el acceso a los datos:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
head(): Record<string, unknown> {
return { title: this.response.title } // <-- no se puede acceder a la respuesta a continuación / indefinida
},
async asyncData({ params, $http }) {
const response = await $http.$get(`https://<myserverapi>/getpage`)
console.log(response.title) // <-- obtuve datos junto con el título
return { response }
}
})
export default class StandardPage extends Vue {}
</script>
¿Alguien podría decirme por favor qué estoy haciendo mal o qué más necesito?
davy.ai
Solución para establecer metadatos de página en Nuxt después de obtener datos con Apollo
Si estás intentando establecer metadatos de página en Nuxt después de obtener datos con Apollo, y lo estás haciendo dentro de un componente de clase, es posible que encuentres problemas al acceder a los datos o al usar
this.$apollo.query
. Aquí tienes algunas sugerencias para abordar este problema:Problema con Apollo
Al usar Apollo, puedes probar el siguiente enfoque:
Aquí, utilizamos el gancho
asyncData
para obtener datos utilizando el cliente de Apollo proporcionado por el proveedor Apollo de la aplicación. Pasamosparams.path
como una variable a la consulta, asumiendo que queremos consultar una página en función de su ruta. Los datos obtenidos se devuelven como parte del objetoresponse
.En el método
head
, podemos acceder athis.response.title
para establecer el título de la página en los metadatos de la cabecera.Problema de acceso a datos
Si necesitas obtener datos utilizando
this.$http.$get
u otro método similar, puedes probar el siguiente enfoque:Aquí, utilizamos el método
$http.$get
proporcionado porapp
para obtener datos de una API externa. Suponemos que los datos devueltos contienen los metadatos relevantes para la página.En el método
head
, podemos acceder athis.response.title
para establecer el título de la página en los metadatos de la cabecera.Consejos adicionales
fetch()
en lugar deasyncData
para obtener datos.¡Espero que esto sea de ayuda! Haznos saber si tienes alguna pregunta adicional o algún problema.