TypeError: sanityConfig.fetch is not a function - Next.js Sanity setup
ERROR:
TypeError: _sanity__WEBPACK_IMPORTED_MODULE_3__.sanityConfig.fetch is not a functionindex.tsx
import Head from 'next/head';
import Header from '../components/Header';
import {sanityConfig, urlForImage} from '../sanity';
import {Post} from '../typing';
interface Props {
posts: [Post];
}
export default function Home({posts}: Props) {
console.log(posts);
return (
<div className="header-front">
<Head>
<title>Test</title>
</Head>
<Header/>
{/* Posts */}
<div className="wrap-front">
{posts.map((post) => {
return (
<a key={post._id} href={`/post/${post.slug.current}`}>
<div className="group cursor-pointer overflow-hidden rounded-lg border">
<img
className="article-image"
src={urlForImage(post.mainImage).height(1000).width(2000).url()}
width={2000}
height={1000}
alt=""
sizes="100vw"
/>
<div className="flex justify-between bg-white p-5">
<div>
<p className="article-mainTitle">{post.title}</p>
<p>
{post.description} by {post.author.name}
</p>
</div>
{/* <img
className="h-12 w-12 rounded-full"
src={urlFor(post.author.image).url()!}
alt=""
/>*/}
</div>
</div>
</a>
);
})}
</div>
</div>
);
}
export async function getServerSideProps() {
const query = `*[_type == "post"] {
_id,
title,
author -> {
name,
image
},
description,
mainImage,
slug
}`;
const posts = await sanityConfig.fetch(query);
return {
props: {posts},
};
}sanity.js
import {createCurrentUserHook} from 'next-sanity';
import createImageUrlBuilder from '@sanity/image-url';
export const sanityConfig = {
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
apiVersion: '2021-08-11',
useCdn: process.env.NODE_ENV === 'production',
};
export const imageBuilder = createImageUrlBuilder(sanityConfig);
export const urlForImage = (source) =>
imageBuilder.image(source).auto('format').fit('max')
// Helper function for using the current logged-in user account
export const useCurrentUser =
createCurrentUserHook(sanityConfig);The issue is that you've created a sanityConfig object with configuration properties, but you're trying to call .fetch() on it directly. The config object itself doesn't have a fetch method - you need to create a Sanity client first.
Here's how to fix your sanity.js file:
import {createClient} from 'next-sanity';
import {createCurrentUserHook} from 'next-sanity';
import createImageUrlBuilder from '@sanity/image-url';
export const sanityConfig = {
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
apiVersion: '2021-08-11',
useCdn: process.env.NODE_ENV === 'production',
};
// Create the client that has the fetch method
export const sanityClient = createClient(sanityConfig);
export const imageBuilder = createImageUrlBuilder(sanityConfig);
export const urlForImage = (source) =>
imageBuilder.image(source).auto('format').fit('max');
// Helper function for using the current logged-in user account
export const useCurrentUser = createCurrentUserHook(sanityConfig);Then update your import in index.tsx:
import {sanityClient, urlForImage} from '../sanity';And in your getServerSideProps:
export async function getServerSideProps() {
const query = `*[_type == "post"] {
_id,
title,
author -> {
name,
image
},
description,
mainImage,
slug
}`;
const posts = await sanityClient.fetch(query);
return {
props: {posts},
};
}The key change is using createClient from next-sanity to create a client instance that has the fetch() method. The config object is just a plain JavaScript object with settings - you need to pass it to createClient() to get an actual client with methods like fetch().
Make sure you have next-sanity installed:
npm install next-sanityThis should resolve your error!
Show original thread2 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
