Issue with fetching data from Sanity API in Next.js project

16 replies

Last updated: Feb 11, 2022

I've started a project with nextJS + sanity. I'm facing some problems. What's wrong in my code? When I open the console it shows me :
Server error:
*Error: HTTP 404 Not Found: https://*******.
api.sanity.io/v1/data/query/production?query=*%5B%20_type%20%3D%3D%20%22post%22%5D *
I attached screenshots and code below, please someone help.

sanity.js file:

import { createClient, createImageUrlBuilder } from "next-sanity";

const config = {
  
  dataset: "production",
  projectId: "****************",
  useCdn: process.env.NODE_ENV === "production",
  
};

export const urlFor = (source) => createImageUrlBuilder(config).image(source);
export const sanityClient = createClient(config);

homepage.js file:

import React from "react";
import { sanityClient } from "../sanity";

const Homepage = ({ properties }) => {
  console.log(properties);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

export const getServerSideProps = async () => {
  const query = '*[ _type == "post"]';
  const properties = await sanityClient.fetch(query);

  if (!properties.length) {
    return {
      props: {
        properties: [],
      },
    };
  } else {
    return {
      props: {
        properties,
      },
    };
  }
};

export default Homepage;

post.js Schema:

export default {
  name: "post",
  title: "Post",
  type: "document",
  fields: [
    {
      name: "name",
      title: "Name",
      type: "string",
      description: "please use 'Firstname Lastname' format",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "name",
        maxLength: 100,
      },
    },
    {
      name: "image",
      title: "Image",
      type: "image",
    },
  ],
};

AI Update

The HTTP 404 error you're seeing is happening because your Sanity client configuration is missing the required apiVersion property. This is a mandatory field that tells Sanity which version of the API you want to use.

Here's the fix for your sanity.js file:

import { createClient, createImageUrlBuilder } from "next-sanity";

const config = {
  dataset: "production",
  projectId: "****************",
  apiVersion: "2024-01-01", // ADD THIS LINE
  useCdn: process.env.NODE_ENV === "production",
};

export const urlFor = (source) => createImageUrlBuilder(config).image(source);
export const sanityClient = createClient(config);

The apiVersion should be set to today's date or the date you're developing your project (in YYYY-MM-DD format). This ensures your queries work consistently as Sanity's API evolves.

Additional recommendations:

Use environment variables instead of hardcoding your projectId. Create a .env.local file:

NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production

Then update your config:

const config = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  apiVersion: "2024-01-01",
  useCdn: process.env.NODE_ENV === "production",
};

Verify your dataset exists: Double-check that you actually have a "production" dataset in your Sanity project. You can verify this in your Sanity management console or by running sanity dataset list in your terminal.
Make sure your schema is deployed: Ensure you've started your Sanity Studio (sanity dev) so your "post" schema is available, or if you're using a separate Studio, make sure it's been deployed.

Once you add the apiVersion, your 404 error should be resolved and your queries will work properly!

Which page are you trying to visit when it 404s?

Hey Farhan. One reason your request to the Sanity API might

is if the dataset you've requested doesn't exist.
Please can you
take a look in the Datasets tab of Manage and verify that you have a dataset named

production

user T

Thanks for your reply, I want to visit homepage.js page, when I try to fetch data in sanity vision, its work but when I try to fetch from nextjs page its give me 404.

user T

Thanks for your reply, I want to visit homepage.js page, when I try to fetch data in sanity vision, its work but when I try to fetch from nextjs page its give me 404.

user E

Thanks for your reply. My dataset is set as production.I can't understand why it's doesn't work.

sanity.js file:

import { createClient, createImageUrlBuilder } from "next-sanity";

const config = {
  
  dataset: "production",
  projectId: "****************",
  useCdn: process.env.NODE_ENV === "production",
  
};

export const urlFor = (source) => createImageUrlBuilder(config).image(source);
export const sanityClient = createClient(config);

homepage.js file:

import React from "react";
import { sanityClient } from "../sanity";

const Homepage = ({ properties }) => {
  console.log(properties);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

export const getServerSideProps = async () => {
  const query = '*[ _type == "post"]';
  const properties = await sanityClient.fetch(query);

  if (!properties.length) {
    return {
      props: {
        properties: [],
      },
    };
  } else {
    return {
      props: {
        properties,
      },
    };
  }
};

export default Homepage;

Okay. Hmm 🕵️‍♀️. Please can you try wrapping your query in a try/catch block, and explicitly logging the error?
Something like this should work for debugging purposes:

export const getServerSideProps = async () => {
  try {
    const query = '*[ _type == "post"]';
    const properties = await sanityClient.fetch(query);
  
    if (!properties.length) {
      return {
        props: {
          properties: [],
        },
      };
    } else {
      return {
        props: {
          properties,
        },
      };
    }
  } catch (error) {
    console.log('[SANITY QUERY FAILED]', error)
  }
};

The error details will get logged to the terminal window where you're running the Next.js server. Please can you paste the error here?

Sure, please wait

user E

It's working now in another formula. Thanks for your valuable reply.

Ah, that's awesome! 🙂
Would you be able to share what the problem was, in case any other folks experience this?

user E

Sure. I followed Ania kubow's tutorial on youtube, her code is working on her machine but not mine. I try to figure out what was my problem, but I can't.Again I tried a new project of Kapehe mam on youtube, her code is working for me.

Hmm. Strange. I'm glad you got it working! Let us know if you have any other questions 🙂.

Yes I have another query if you don't mind.Is it possible to deploy sanity studio on vercel? every time if I have to update the data I need to open it on localhost:3333 port. Is there any option to deploy the studio for easily access? Thank you so much!

Yes, you can host the studio on Vercel. It should work on most hosting services that support static files.
But an even easier option might be to use the Studio hosting we provide
🙂. You can do that by running the

sanity deploy

CLI command from your Studio project directory.

You can learn more about deploying the Studio here .

Thank you so much. 🙂

You're welcome! 🙂

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 free Explore the demo

Issue with fetching data from Sanity API in Next.js project

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?