Issue with fetching data from Sanity API in Next.js project
16 replies
Last updated: Feb 11, 2022
F
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 :
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:
homepage.js file:
post.js Schema:
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",
},
],
};Feb 8, 2022, 8:08 PM
T
Which page are you trying to visit when it 404s?
Feb 8, 2022, 9:37 PM
A
Hey Farhan. One reason your request to the Sanity API might
Please can you
take a look in the Datasets tab of Manage and verify that you have a dataset named
404is 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?
Feb 9, 2022, 11:29 AM
F
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.Feb 9, 2022, 3:15 PM
F
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.Feb 9, 2022, 3:15 PM
F
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;Feb 9, 2022, 3:18 PM
A
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:
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?
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)
}
};Feb 9, 2022, 3:28 PM
F
Sure, please wait
Feb 9, 2022, 3:49 PM
F
user E
It's working now in another formula. Thanks for your valuable reply.Feb 9, 2022, 3:53 PM
A
Ah, that's awesome! 🙂
Would you be able to share what the problem was, in case any other folks experience this?
Would you be able to share what the problem was, in case any other folks experience this?
Feb 9, 2022, 3:58 PM
F
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.Feb 9, 2022, 4:04 PM
A
Hmm. Strange. I'm glad you got it working! Let us know if you have any other questions 🙂.
Feb 9, 2022, 4:07 PM
F
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!
Feb 9, 2022, 4:10 PM
A
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
You can learn more about deploying the Studio here .
But an even easier option might be to use the Studio hosting we provide
🙂. You can do that by running the
sanity deployCLI command from your Studio project directory.
You can learn more about deploying the Studio here .
Feb 10, 2022, 9:37 AM
F
Thank you so much. 🙂
Feb 11, 2022, 2:45 PM
F
Thank you so much. 🙂
Feb 11, 2022, 2:45 PM
A
You're welcome! 🙂
Feb 11, 2022, 3:01 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.