Nuxtjs和Sanity $sanity.fetch()在asyncData中页面更改时返回null

Question

我正在使用NuxtJS与理智的CMS。

我已经设置了几个页面组件，其中每个页面组件都使用asyncData钩子从CMS获取数据以显示页面。

我的页面组件大部分看起来都是这样的，但是使用不同的groq查询：

<script>
import { groq } from '@nuxtjs/sanity';

export default {
    async asyncData({ $sanity }) {
        const query = groq`
            *[_type == "about"][0]
        `;
        const about = await $sanity.fetch(query);
        console.log(about); //returns proper data on page load, returns null on page change
        return { about };
    }
};
</script>

在初始页面加载或整个页面刷新时，页面加载良好--适用于我的应用程序中的所有页面。

当使用本地dev服务器时，当我使用<NuxtLink>更改页面时，遵循此模式的每个页面都无法使用$sanity.fetch()方法返回数据。每次它返回null时。这使我很难开发页面转换。

我可以尝试将这些转换成使用fetch钩子，但是AFAIK，这是asyncData的正确用例。

在版本控制方面，下面是我的package.json中的内容

{
    //...,
    "dependencies": {
        "@nuxtjs/sanity": "^0.9.4",
        "@nuxtjs/style-resources": "^1.2.0",
        "@nuxtjs/svg": "^0.1.12",
        "@sanity/asset-utils": "^1.1.5",
        "@sanity/client": "^2.13.0",
        "@sanity/image-url": "^0.140.22",
        "axios": "^0.21.1",
        "core-js": "^3.15.1",
        "nuxt": "^2.15.7",
        "nuxt-gsap-module": "^1.3.2",
        "vue-youtube": "^1.4.0"
    },
    "devDependencies": {
        "@babel/eslint-parser": "^7.14.7",
        "@nuxtjs/eslint-config": "^6.0.1",
        "@nuxtjs/eslint-module": "^3.0.2",
        "eslint": "^7.29.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-nuxt": "^2.0.0",
        "eslint-plugin-vue": "^7.12.1",
        "fibers": "^5.0.0",
        "prettier": "^2.3.2",
        "sass": "^1.35.2",
        "sass-loader": "^10.2.0"
    }
}

就我的nuxt配置而言，如下所示：

export default {
    // Target: https://go.nuxtjs.dev/config-target
    target: 'static',

    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        titleTemplate: '%s - My great project',
        title: 'My Project',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' },
            { name: 'format-detection', content: 'telephone=no' }
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
    },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: ['@/styles/main.scss'],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: '~/plugins/sanity-image-builder.js' },
        { src: '~/plugins/sanity-asset-url.js' },
        { src: '~/plugins/youtube.js', ssr: false }
    ],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
        // https://go.nuxtjs.dev/eslint
        '@nuxtjs/eslint-module',
        '@nuxtjs/sanity/module',
        '@nuxtjs/style-resources',
        'nuxt-gsap-module'
    ],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: ['@nuxtjs/svg'],

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        loaders: {
            scss: { sourceMap: false },
            sass: { sourceMap: false }
        }
    },

    generate: {
        fallback: true
    },

    // Override santity config here.
    privateRuntimeConfig: {
        sanity: {
            token: process.env.SANITY_TOKEN
        }
    },

    styleResources: {
        scss: ['./styles/*.scss']
    }
};

Answer 1

当您确实使用privateRuntimeConfig时，您的env变量将仅在SSR上可用。因此，当您第一次到达页面时，您确实可以访问它。

然后，当您导航(客户端只导航)时，您就无法在客户端上访问它了。正如正式文件中所解释的那样。

精神健全的文件说的是privateRuntimeConfig，同时我也想知道他们的标记是否只针对privateRuntimeConfig。通常，您确实有一个可以通过publicRuntimeConfig密钥公开的公共令牌。

有一个关于不和谐的headless频道可以在这里使用：https://discord.gg/H4hJBMCK

否则，发布吉特布问题可能会让你找到丹尼尔的答案。

但是，理智的目标可能仅仅是在服务器上获取内容，而不是确定。

有一个setToken方法，但是这个方法只针对req，这意味着这不适合于target: static构建？

编辑: nvm Ovi实现了使其工作，如下所示：https://github.com/nuxt-community/sanity-module/issues/99#issuecomment-813993013

这个应该能用！

PS:在我调查这些问题的时候，我还在写字呢。如果有点乱的话对不起。告诉我最新的解决方案是否有效，我将编辑我的答案。