Skip to content
🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Get help on Slack

Trouble with querying content from Sanity database in Eleventy, resolved with help from the community.

26 replies
Last updated: May 1, 2020
Heya, I’m trying to make my first site using sanity. I want to use Eleventy as my frontend but I’m having trouble querying the content from my database. Are there any specific guides for eleventy and sanity?
Apr 30, 2020, 12:21 PM
Hi User, welcome! 👋 And cool choice with Eleventy (we recently opened an 11ty channel in case you want to join). There’s an Eleventy + Sanity blog boilerplate example over here: https://github.com/kmelve/eleventy-sanity-blog-boilerplate
Are you getting any specific errors when querying content?
Apr 30, 2020, 12:25 PM
Apr 30, 2020, 12:29 PM
Thanks! I haven’t had a look at the boilerplate one so I’ll check it out
Apr 30, 2020, 12:31 PM
the error I’m getting is this one 
"Unable to parse entire expression"
Apr 30, 2020, 12:31 PM
Do you have any repo you can share (in DM if you prefer)? Or specific code causing that error if it’s clear where it comes from?
Apr 30, 2020, 12:33 PM
Apr 30, 2020, 12:42 PM
Thanks User! Did it originally work when you made the initial commit? You used Sanity’s 11ty starter for this, correct (the one User shared)?
Apr 30, 2020, 12:45 PM
No I started with a clean sanity, structured the database and then was beginning to figure out how to get the data to eleventy which is where I got stuck. But I did have a look at the one that User shared to try and help me
Apr 30, 2020, 12:47 PM
In 
newsItems.js
, an orphan bracket 
}
seems to have sneaked in:
const projection = groq `{
  _id,
  publishedAt,
  title,
  body
  }
}`
Should be:

const projection = groq `{
  _id,
  publishedAt,
  title,
  body
}`
Apr 30, 2020, 1:18 PM
ahhh sneaky! Thanks, I’ll check it
Apr 30, 2020, 1:33 PM
Hey, sorry to keep bothering you. The bracket was indeed the problem but now I’m having trouble previewing the rendered html content in eleventy. When I run 
npx @11ty/eleventy --serve
I get an error about the directory for home.njk not existing and when I go to the localhost:8080 it only says 
Cannot GET /
Do you have any ideas whats causing this?
May 1, 2020, 8:12 AM
I switched to using the boilerplate that User sent above but adjusted everything for my site
May 1, 2020, 8:13 AM
Does your web root have an 
index.njk
file including 
layout: layouts/home.njk
and is there a 
home.njk
file in your 
_includes/layouts/
folder? Do you have an updated repo to share by any chance? 🙂
May 1, 2020, 9:05 AM
Also, do you have this section in the return statement of your 
.eleventy.js
file?
dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
May 1, 2020, 9:06 AM
yes to all of the above!
May 1, 2020, 9:07 AM
May 1, 2020, 9:07 AM
I’ve tried deploying it to netlify but thats also having issues too
May 1, 2020, 9:07 AM
The latter would make sense as it might be lacking some Netlify-specific config. It seems to be set up for Vercel (previously known as Zeit Now) - see the 
now.json
file for example (although it has instructions for Netlify in the readme). I’ll be able to have a look at the repo in around an hour if that’s OK.
May 1, 2020, 9:09 AM
yeah thats great, thanks for your help!
May 1, 2020, 9:10 AM
What’s the error you’re getting on Netlify?
May 1, 2020, 9:12 AM
its managing the deploy alright but then when I open the studio page sanity stays on the loading screen until it says that there might be a problem with the internet connection
May 1, 2020, 9:15 AM
When I run eleventy from inside the web folder then it works, but from the root it doesn’t
May 1, 2020, 9:21 AM
Hi again User, just had some time to go through the repo. Have you tried something like this in your 
newsItemsList.njk
file?
<ol reversed class="newsitemslist" style="counter-reset: start-from {{ newsitemslist.length + 1 }}">
{% for newsItem in newsitemslist | reverse %}
  {% set currentNewsItem = newsItem.data.newsItem %}
  <li class="newsitemslist-item{% if newsItem.url == url %} newsitemslist-item-active{% endif %}">
    <a href="{{ newsItem.url | url }}" class="newsitemslist-link">{% if currentNewsItem.title %}{{ currentNewsItem.title }}{% else %}<code>{{ newsItem.url }}</code>{% endif %}</a>
    <time class="newsitemslist-date" date="{{ currentNewsItem.publishedAt }}">{{ currentNewsItem.publishedAt|readableDate }}</time>
  </li>
{% endfor %}
</ol>
May 1, 2020, 3:58 PM
ah I can’t believe I missed that I hadn’t changed ‘post’ to ‘newsItem’
May 1, 2020, 4:02 PM
thank you, it worked perfectly
May 1, 2020, 4:02 PM
Awesome! 🙂
May 1, 2020, 4:04 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.

Get started for freeExplore the demo

Was this answer helpful?