Nuxtjs 和 Sanity CMS - $sanity.fetch() returns asyncData 中的页面更改为空

Question

我将 NuxtJS 与 Sanity 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>

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

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

我可以尝试将它们转换为使用 fetch 挂钩，但是据我所知，这是 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 时，您的环境变量将仅在 SSR 上可用。因此，当您第一次访问该页面时，您确实可以访问它。

然后，当您导航时（仅限客户端），您将无法再在您的客户端上访问它。如 official documentation.

中所述

Sanity's documentation说的是privateRuntimeConfig，同时我也想知道他们的token是不是只针对SSR的。通常，您确实有一个可以通过 publicRuntimeConfig 密钥公开的 public 令牌。

Discord 上有一个 headless 频道，可在此处找到：https://discord.gg/H4hJBMCK
否则，发帖 a Github issue 可能会让您找到 Daniel 的答案。

但Sanity有可能只是为了获取服务器上的内容，不确定。

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

编辑：nvm Ovi 已实现，如下所示：https://github.com/nuxt-community/sanity-module/issues/99#issuecomment-813993013
这个应该可以用！

PS：我在调查问题时写的有点像。对不起，如果它有点乱。告诉我最新的解决方案是否有效，我会编辑我的答案。

Nuxtjs 和 Sanity CMS - $sanity.fetch() returns asyncData 中的页面更改为空

Nuxtjs and Sanity CMS - $sanity.fetch() returns null on page change in asyncData

nuxt.js

sanity

asyncdata