Integrating Sanity with 11ty: troubleshooting and solutions
3 replies
Last updated: Feb 10, 2025
A
Are there any up-to-date guides for setting up Sanity with 11ty (Eleventy)?
I'm having a lot of trouble finding a good guide on integrating Sanity with 11ty. Specifically, I want to know how to get content in JSON format from Sanity into the _data directory of 11ty given a GROQ query that the Sanity "Getting Started" guide shows how to make upon signing up.
The following guide seems to rely on an out-of-date link to
https://www.sanity.io/create and, thus, doesn't show the whole integration setup: https://www.sanity.io/guides/how-to-get-started-with-the-11ty-eleventy-blog-starter
The following guide seems to have something useful in the "Eleventy Global Data" section, but I am unsure if the part about the query is all that's needed to have 11ty continuously monitor for any changes made in Sanity's content:
https://www.sanity.io/blog/migrating-netlify-blog-hugo-eleventy-using-sanity#f3cfa6179abb
Any advice and (creation of) relevant resources would be helpful.
I'm having a lot of trouble finding a good guide on integrating Sanity with 11ty. Specifically, I want to know how to get content in JSON format from Sanity into the _data directory of 11ty given a GROQ query that the Sanity "Getting Started" guide shows how to make upon signing up.
The following guide seems to rely on an out-of-date link to
https://www.sanity.io/create and, thus, doesn't show the whole integration setup: https://www.sanity.io/guides/how-to-get-started-with-the-11ty-eleventy-blog-starter
The following guide seems to have something useful in the "Eleventy Global Data" section, but I am unsure if the part about the query is all that's needed to have 11ty continuously monitor for any changes made in Sanity's content:
https://www.sanity.io/blog/migrating-netlify-blog-hugo-eleventy-using-sanity#f3cfa6179abb
Any advice and (creation of) relevant resources would be helpful.
Feb 10, 2025, 8:45 PM
D
Hi there👋
I'm not able to find any more up-to-date guides at the moment either.
However, we should be able to build out a JS file in the
I'm not able to find any more up-to-date guides at the moment either.
However, we should be able to build out a JS file in the
_datadirectory to fetch the data. I'm not able to test this at the moment, but it should look something like this
const sanityClient = require('@sanity/client')
require('dotenv').config()
const client = sanityClient.createClient({
projectId: process.env.SANITY_PROJECT_ID,
dataset: process.env.SANITY_DATASET || 'production',
apiVersion: '2024-02-10',
useCdn: false
})
const postsQuery = `*[_type == "post"]`
async function getPosts() {
try {
return await client.fetch(postsQuery)
} catch (error) {
console.error('Error fetching posts:', error)
return []
}
}
module.exports = getPostsFeb 10, 2025, 9:08 PM
A
Thank you so much for your help!
I think I finally got it to work with the addition of .createClient as you mentioned in my code I adjusted based on what I found at
https://www.bryanleetc.com/adding-sanity-io-headless-cms-to-eleventy/
I can see the CMS post in the frontend now.
I think I finally got it to work with the addition of .createClient as you mentioned in my code I adjusted based on what I found at
https://www.bryanleetc.com/adding-sanity-io-headless-cms-to-eleventy/
I can see the CMS post in the frontend now.
Feb 10, 2025, 9:34 PM
A
After some more digging around related issues, I realize I should've looked up the docs of @sanity/client 😅
https://www.sanity.io/docs/js-client
In any case, I appreciated the help earlier.
https://www.sanity.io/docs/js-client
In any case, I appreciated the help earlier.
Feb 10, 2025, 11:03 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.