Nuxt Apollo SSR 查询依赖于另一个查询的结果

Question

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

我正在使用基于vue-cli-plugin-apollo 和vue-apollo 的@nuxtjs/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

通常，当您的查询依赖于另一个查询的结果时，您可以使用skip 选项来阻止请求第二个查询，直到第一个查询得到解决。但是，skipping the query means it won't be prefetched。我认为你可以做你想做的事情的唯一方法是使用asyncData 而不是依赖智能查询——你必须直接在 ApolloClient 的实例上调用query 方法。您可能可以仅针对第一个查询执行此操作，然后在您的第二个查询中将结果数据用作变量值，但我不知道之前是否提取了 asyncData您的查询已预取。

顺便说一句，如果您正在查询自己的服务器，您可能会考虑更新您的 API。通常情况下，您需要像这样链接两个查询，这表明架构设计不佳。例如，我不应该获取用户，获取他们的 ID，然后通过 ID 获取用户的帖子——我应该能够在一个查询中获取整个数据图（用户和他们的帖子）。