时间戳

首页 > 解决方案 > Nuxt.js 服务器端渲染：启动服务器后数据未更新

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

问题描述

我遇到了 Nuxt.js 和 Apollo 的问题，没有使用我的 API 源中的最新内容更新我的页面内容。服务器在启动时会“卡在”版本上，除非我重新启动服务器，否则数据不会更新。我在 Github 上搜索过任何类似的问题，甚至在这里也找不到任何东西。

我正在"@nuxtjs/apollo": "^4.0.1-rc.5"使用"nuxt": "^2.14.12".

使用nuxt dev模式时，我没有问题，我的页面数据被正确获取，如果我在我的 API 上更改它的一些数据，然后重新加载页面，数据就会更新。

Nuxt 设置为以服务器为目标，因此它不会构建静态文件。

当我在 SSR 中时，nuxt build && nuxt start我的页面最初会显示正确的数据，所以 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.jsapolloserver-side-rendering

解决方案

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

推荐阅读