Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

Trouble querying content with 11ty

30 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 Ben, 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

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: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
Apr 30, 2020, 12:42 PM

Thanks Ben! Did it originally work when you made the initial commit? You used Sanity’s 11ty starter for this, correct (the one Knut 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 Knut 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 Knut 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

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 Ben, 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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.

Categorized in

Related topics

Get more help in the community Slack

Go to Any folks have a11y modules you’d recommend? Would love to have something that acts as a linter while we dev to make sure we’re being as compliant as possible
TopicCategoriesFeaturedRepliesLast Updated
Any folks have a11y modules you’d recommend? Would love to have something that acts as a linter while we dev to make sure...3Aug 11, 2020

Related contributions

Blog with Eleventy
- Starter

Official(made by Sanity team)

A simple blog starter with an Eleventy front-end.

Go to Blog with Eleventy

Quick experiment with the Slinkity 11ty plugin (and Sanity data)
- Guide

A quick write up of my first experiment with the Slinkity 11ty plugin. We build a quick "Like" button for my son's art site that increments Sanity data.

This is an external link at:bryanlrobinson.com
Bryan Robinson
Go to Quick experiment with the Slinkity 11ty plugin (and Sanity data)