【发布时间】:2021-06-20 07:54:04
【问题描述】:
我遇到了一个问题,Nuxt.js 和 Apollo 没有使用我的 API 源中的最新内容更新我的页面内容。服务器在启动时会“卡在”版本上,除非我重新启动服务器,否则数据不会更新。我在 Github 上搜索过任何类似的问题,甚至在这里也找不到任何东西。
我正在使用 "@nuxtjs/apollo": "^4.0.1-rc.5" 和 "nuxt": "^2.14.12"。
当使用nuxt dev 模式时,我没有任何问题,我的页面数据被正确获取,如果我在我的 API 上更改它的一些数据,然后重新加载页面,数据就会更新。
Nuxt 设置为以服务器为目标,因此它不会构建静态文件。
当我使用nuxt build && nuxt start 在 SSR 中时,我的页面最初会显示正确的数据,因此 SSR 似乎可以工作。但是,如果我编辑我的 API 数据然后重新加载页面,我不会更新页面内容,而是更新我运行 nuxt start 时的版本。
如果我停止并重新启动应用程序,然后重新加载页面,我会显示正确的更新数据。我觉得这可能是一个与缓存相关的问题。
这是我加载到 Nuxt 中的 apollo 配置:
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import introspectionQueryResultData from './graphql.schema.json'
const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData
})
const cache = InMemoryCache({ fragmentMatcher })
export default function (ctx) {
return {
httpEndpoint: MY_ENDPOINT,
cache
}
}
我需要 Fragment Matcher 才能使用 GraphQL 片段并使用 codegen 生成类型,我的代码库在 Typescript 中。这在开发模式下就像一个魅力,但可能是它在 SSR 中不起作用的原因,即使我找不到原因。
在我的 Vue 组件上呈现我的页面,这是一个示例配置:
apollo: {
page: {
prefetch: true,
query: queryPage, // imported GraphQL query with .gql file
variables() {
return {
id: 2
}
}
}
}
我不明白为什么我的服务器在启动后没有重新获取数据。我尝试在 Nuxt 生成的服务器文件中进行调试,但没有成功。
如何让我的页面在加载时获取数据,而无需在每次更新我的 API 内容后重新启动应用程序?
【问题讨论】:
标签: nuxt.js apollo server-side-rendering