vue.js - 依赖于另一个查询结果的 Nuxt Apollo SSR 查询

Question

SO 中的类似问题不是 SSR(服务器端渲染)特定的，它们的答案不适用于我的情况。

我正在使用 @nuxtjs/apollo这是基于 vue-cli-plugin-apollo和 vue-apollo

我有两个查询 X 和 Y。 Y 的变量取自 X 的结果。我想在服务器端 执行这两个查询。如何实现？

下面的简化示例是我能得到的最接近的示例。但是，查询 Y 是在客户端 执行的。

{
  apollo: {
    X: {
      query: X
    },
    Y: {
      query: Y,
      variables() {
        return { id: this.X.someField };
      },
      skip() {
        return !this.X; // Skip until X have some result.
      }
    },
  }
}

基本上我想要:

• 在服务器上执行查询 X 并获得结果。
• 使用来自查询 X 结果的变量在服务器上执行查询 Y。

非常感谢，

Answer 1

我遇到了同样的问题，在尝试了很多选项后终于找到了解决方案。
查询 X 和 Y 可以通过使用父子 Vue 组件在服务器端顺序运行。

1. 在父组件中运行查询 X。
2. 通过 props 将 X 的结果传递给子组件。
3. 使用 props 中的变量在子组件中运行查询 Y。