NextJS对接Sanity获取数据报fetch未定义错误如何解决

错误原因 #

报错是因为你导入的client实例实际为undefined，核心问题出在client.js配置文件：

• 你在文件内初始化了Sanity客户端，但没有编写导出client的语句，页面文件中import { client } from '../library/client'拿到的值是undefined，调用.fetch()自然触发类型错误
• 另外还有两处后续会触发问题的隐藏bug：
  • urlFor方法缺少return返回值，后续生成图片地址时会得到undefined
  • 如果你本地安装的@sanity/client是v3及以上新版本，原有的默认导入sanityClient的写法本身就不兼容，会导致初始化失败

修复代码 #

直接替换client.js的全部内容即可：

// @sanity/client v3+ 版本用以下导入，v2版本替换为 import sanityClient from '@sanity/client'
import { createClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

// 初始化客户端后直接导出
export const client = createClient({
    projectId: 's0331zgs',
    dataset: 'production',
    apiVersion: '2022-07-05',
    useCdn: true,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN
});

const builder = imageUrlBuilder(client);

export const urlFor = (source)=> {
    // 补全return返回值
    return builder.image(source);
}

如果你用的是v2版本的@sanity/client，把初始化方法从createClient换成sanityClient即可，其余逻辑不变。

验证 #

改完配置后重启NextJS开发服务，getServerSideProps中就能正常调用client.fetch()拉取Sanity数据，不会再触发该报错。

内容的提问来源于stack exchange，提问作者coding beast