Nuxt Apollo Client通过NuxtLink跳转不请求数据仅刷新生效如何解决

问题根因 #

• 全页面刷新时触发服务端渲染，Apollo会主动发起请求拉取最新数据，结果会注入到客户端缓存完成水合
• <NuxtLink>跳转属于客户端路由切换，Apollo默认优先读取本地缓存，不会主动发起新请求
• 此前修改fetchPolicy出现水合报错，核心是服务端与客户端查询策略不一致，导致服务端返回的HTML内容和客户端首次渲染内容不匹配
• 注意你测试时填写的netowrk-only为拼写错误，正确写法是network-only，拼写错误会导致配置不生效

可落地解决方案 #

方案1：区分环境配置fetchPolicy（最推荐） #

针对单个查询分别配置服务端、客户端的拉取策略，既保证数据最新，又避免水合报错，修改test.vue的apollo配置即可：

<script>
import testQuery from '~/apollo/queries/test.graphql'

export default {
  apollo: {
    users: {
      query: testQuery,
      prefetch: true,
      // 服务端始终走网络拉最新数据，客户端先返回缓存再更新数据
      fetchPolicy: process.server ? 'network-only' : 'cache-and-network',
    },
  },
}

如果不需要旧数据瞬间展示的中间态，可以将客户端策略改为network-only，水合阶段会自动复用服务端注入的缓存数据对齐渲染结果，不会触发报错。

方案2：客户端挂载后手动重查 #

如果仅需要特定页面跳转时刷新数据，直接在组件mounted钩子触发重查即可，该钩子仅在客户端执行，不会影响服务端渲染：

<script>
import testQuery from '~/apollo/queries/test.graphql'

export default {
  apollo: {
    users: {
      query: testQuery,
      prefetch: true,
    },
  },
  mounted() {
    // 强制重新拉取最新数据，覆盖缓存
    this.$apollo.queries.users.refetch()
  }
}
</script>

方案3：全局配置默认拉取策略 #

如果所有查询都需要每次拉取最新数据，直接在apollo.config.js中添加全局默认配置即可：

export default context => ({
  httpEndpoint: 'https://test.hasura.app/v1/graphql',
  getAuth () {
    return context.store.state.auth.token ? `Bearer ${context.store.state.auth.token}` : null
  },
  // 新增全局默认查询策略
  defaultOptions: {
    query: {
      fetchPolicy: process.server ? 'network-only' : 'cache-and-network',
    }
  }
})

内容的提问来源于stack exchange，提问作者Evaldas B