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存储，该存储接受我所有的阿波罗查询，并使它们中的数据可在整个应用程序中访问，但是文档对于如何执行此操作非常含糊。任何帮助将不胜感激！

Answer 1

您真的确定未预取您的数据吗？

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

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

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

您不需要Vuex即可存储对阿波罗查询的响应：

来自vue-apollo文档：

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

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

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

1 个答案: