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

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

我正在从GraphQLAPI请求数据，并希望预取数据以使用服务器端渲染。在阅读文档时，我似乎只需要在apollo查询中设置

预取：true

，但这不起作用–它总是从客户端发送请求，这会导致各种问题

以下是我的组件中的代码：

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

我觉得这与计算此.route.params.id有关

---

最后，我想在

store/index.js

中创建一个Vuex存储，它接受我所有的apollo查询，并使其中的数据在整个应用程序中都可以访问，但文档中对我如何实现这一点非常模糊。任何帮助都将不胜感激

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

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

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

此外，您还可以使用

fetchPolicy

在中配置此行为

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

从文件：

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

---

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

你好@ManUtopiK，谢谢你的回答！我在我的开发工具中查看了网络请求，对于我想要的数据，我有一系列fetch命令，而不是xhr请求…？XMLHttpRequest和fetch是浏览器提供的API，允许从JavaScript发出HTTP请求。两者都可以在devtools/xhr中找到。。。怎么了