如何在 typescript class 组件中设置 Nuxt SSR 异步元数据？使用 Apollo 获取

Question

我试图在获取数据后在 Nuxt 中设置页面元数据，但在 class 组件内进行。更糟糕的是，我正在使用 Apollo 获取数据。有很多使用 asyncData 的例子，例如 , and the documentation 有关于获取的信息。但是，我发现 1) 我无法访问数据，或者 2) 我无法使用 this.$apollo.query，如果在 class 组件中执行其中任何一个。到目前为止，这是我根据 SO 答案和文档得出的结果。

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({ // <-- does't work
      query: SITE_PAGE,
      variables: {
        path: this.$route.path
      }
    });
    return { response }
  },
})
export default class StandardPage extends Vue {}
</script>

如果我只是点击服务器而不是 Apollo 来获取数据，这是访问数据的问题：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  head(): Record<string, unknown> {
    return { title: this.response.title } // <-- cant access response below / undefined
  },
  async asyncData({ params, $http }) {
    const response = await $http.$get(`https://<myserverapi>/getpage`)
    console.log(response.title) // <--got data along with title
    return { response }
  }
})
export default class StandardPage extends Vue {}
</script>

有人可以告诉我我做错了什么或者我还需要什么吗？

Answer 1

为了访问数据，你需要把这个：YOUR_CLASS_NAME 放在头构造函数中。

为了使用 Apollo，您可以通过将上下文传递给 asyncData 来访问它。

最终代码如下所示：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  head(this: StandardPagePage): Record<string, unknown> { // <-- added this:StandardPage
    return { title: this.response.title }
  },
  async asyncData(context): Promise<any> { // <-- added context

    // call to Apollo now looks like this:

    const client = context.app.apolloProvider?.defaultClient
    const response = await client!.query({
      query: SITE_PAGE,
      variables: {
        path: context.route.path,
      },
    })
    return { response }
  },
})
export default class StandardPage extends Vue {}
</script>

如何在 typescript class 组件中设置 Nuxt SSR 异步元数据？使用 Apollo 获取

How to set Nuxt SSR async metadata in a typescript class component? Fetching using Apollo

typescript

apollo

vue.js

server-side-rendering

nuxt.js