Skip to content
Get help on Slack

Error with Sanity configuration and fetch function in Next.js app

2 replies
Last updated: Sep 23, 2022
Hello, i cant understand how to fix this issue. If you can help, please reach out!

ERROR:

TypeError: _sanity__WEBPACK_IMPORTED_MODULE_3__.sanityConfig.fetch is not a function

index.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);
Sep 21, 2022, 5:25 PM
Hey
user C
! Your config is just an object. You need to pass that to the actual client. It looks like you missed a step in the usage guide here . Make sure you add the code in the 
/lib/sanity/server.js
file.
Sep 21, 2022, 5:31 PM
Thanks
Sep 23, 2022, 2:40 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?