使用 Apollo 为 Nuxt.js SSR 预取 API 数据

Question

我有一个关于从 apollo/nuxt 配置中预取数据的非常简单的问题。

我正在从 GraphQL API 请求数据，并希望预取数据以使用服务器端呈现。阅读文档似乎我应该能够简单地在我的阿波罗查询上设置prefetch: true，但这不起作用——它总是从客户端发送请求，这会导致各种问题。

这是我的组件中的代码：

apollo: {
  concept: {
    prefetch: true,
    query: conceptStatements,
    variables () {
      return { id: this.$route.params.id }
    }
  }
}

我觉得这与评估 this.$route.params.id 的时间有关吗？

最终我想在store/index.js 中创建一个 Vuex 存储，它接受我所有的 apollo 查询并呈现其中的数据可在整个应用程序中访问，但文档对我如何做到这一点非常模糊。任何帮助将不胜感激！

Answer 1

您确定没有预取您的数据吗？

预取用于第一次渲染（在 SSR 模式下）； Nuxt/Apollo 调用您的 graphql api，生成页面并将其发送到浏览器。如果您只是从另一条路线导航到您的页面，请从浏览器调用您的 api。

您可以在 devtools/network 中检查此行为，选择 xhr。刷新你的页面，没有 xhr 调用。转到另一条路线并刷新您的页面，然后导航到您的路线，您的 apollo 查询在哪里，您应该会看到对您的 graphql api 的 xhr 调用。

此外，您可以在 apollo config 中使用 fetchPolicy 配置此行为。

您不需要 Vuex 来存储您的 apollo 查询的响应：

来自vue-apollo文档：

当您使用 Apollo 执行 GraphQL 查询时，API 调用的结果 将存储在 Apollo 缓存中。现在想象你还需要存储 某种本地应用程序状态并使其可用于 不同的组件。通常，在 Vue 应用程序中我们可以实现这一点 与 Vuex。但是同时拥有 Apollo 和 Vuex 将意味着你存储你的 数据在两个不同的地方，所以你有两个事实来源。

因此，如果您从不同的页面或组件执行相同的查询，Apollo 不会每次都调用您的 api，而是从 Apollo 缓存中检索数据。阿波罗就是魔法！