Get help on Discord

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);
AI Update

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-sanity

This should resolve your error!

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.
Thanks

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.

Get started for freeExplore the demo

Was this answer helpful?