Error fetching data from Sanity using Next.js and getServerSideProps
9 replies
Last updated: May 11, 2022
V
HI! Yesterday I followed ta YT tutorial on sanity and something else. This is my first time using sanity, so I spent roughly 24 hours trying to fix the error I got. Essentially I, am exporting an object using SanityClient just like in docs using the correct projectId and token.
Then I created two schemas for which I also created entries in my
sanity.io/desk and imported them to schema.js file
I am using Next.js so I used
However, when I console.log(products) I get returned an empty array without any errors. Do you know what went wrong or at least a way to debug this? I cannot seem to get any data back from sanity.
import sanityClient from '@sanity/client'; import imageUrlBuilder from '@sanity/image-url'; export const client = sanityClient({ projectId: '********', // commented out intentionaly dataset: 'production', apiVersion: '2022-05-08', useCdn: true, token: process.env.NEXT_PUBLIC_SANITY_TOKEN }); const builder = imageUrlBuilder(client); export const urlFor = (source) => builder.image(source);
sanity.io/desk and imported them to schema.js file
import createSchema from 'part:@sanity/base/schema-creator'; import schemaTypes from 'all:part:@sanity/base/schema-type'; import product from './product'; import banner from './banner'; export default createSchema({ name: 'default', types: schemaTypes.concat([ product, banner ]), })
getServerSidePropsto fetch the data this way:
export const getServerSideProps = async () => { const query = '*[type == "product"]'; const products = await client.fetch(query); const bannerQuery = '*[type == "banner"]'; const bannerData = await client.fetch(bannerQuery); return { props: { products, bannerData }, }; };
May 9, 2022, 7:02 PM
R
Hey there! You'll want to change your queries from
typeto
_type.
May 9, 2022, 7:15 PM
V
I can't believe, it worked! Can't believe it was that small of an error. Thank you so much!π
May 9, 2022, 7:20 PM
R
You're welcome! Glad it was such a quick fix! π
May 9, 2022, 7:21 PM
I
user E
You probably do not want your token to be publicly available with
process.env.NEXT_PUBLIC_SANITY_TOKEN
May 9, 2022, 8:51 PM
V
Isn't it enough that I added it to the .env file and added that to gitignore?
May 10, 2022, 1:06 AM
I
Variables prefixed with
You should read up on
https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
NEXT_PUBLICwill be exposed to the client and added to the build.
You should read up on
https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
May 10, 2022, 1:10 AM
I
Haven't personally tested this, but I believe you can just
console.log(NEXT_PUBLIC_SANITY_TOKEN)in the browser console and anyone can easily retrieve your token and get access to your Sanity account
May 10, 2022, 1:17 AM
I
Just tested this myself, and can confirm that you can see the API key in clear text in Network->Response (if you use Firefox)
May 10, 2022, 1:26 AM
V
Thank you so much for this, I'll read up!
May 11, 2022, 1:02 AM
Sanityβ build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.