Nuxt.js 服务器端渲染：启动服务器后数据未更新

Posted 2023-03-10

【中文标题】Nuxt.js 服务器端渲染：启动服务器后数据未更新

【英文标题】：Nuxt.js Server Side Rendering: Data doesn't get updated after starting the server

【发布时间】：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 在 s-s-r 中时，我的页面最初会显示正确的数据，因此 s-s-r 似乎可以工作。但是，如果我编辑我的 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 中。这在开发模式下就像一个魅力，但可能是它在 s-s-r 中不起作用的原因，即使我找不到原因。

在我的 Vue 组件上呈现我的页面，这是一个示例配置：

apollo: 
  page: 
    prefetch: true,
    query: queryPage, // imported GraphQL query with .gql file
    variables() 
      return 
        id: 2
      
    
  

我不明白为什么我的服务器在启动后没有重新获取数据。我尝试在 Nuxt 生成的服务器文件中进行调试，但没有成功。

如何让我的页面在加载时获取数据，而无需在每次更新我的 API 内容后重新启动应用程序？

【参考方案1】：

对于面临类似问题的任何人。降级到"@nuxtjs/apollo": "4.0.1-rc.1" 有效。