Nuxtjs 和 Sanity CMS - $sanity.fetch() 在 asyncData

如何解决Nuxtjs 和 Sanity CMS - $sanity.fetch() 在 asyncData

我将 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() 方法返回数据。每次它返回 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']
    }
};

解决方法

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

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

Sanity's documentation 正在谈论 privateRuntimeConfig，同时我想知道他们的代币是否仅针对 SSR。通常，您确实有一个可以通过 publicRuntimeConfig 键公开的公共令牌。

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：在我研究问题时有点写。抱歉，如果有点乱。告诉我最新的解决方案是否有效，我会编辑我的答案。