Get help on Discord

Missing displayExcerpt and displayTitle fields on Sanity front page

14 replies
Last updated: Nov 2, 2021
I got to the post page title and excerpt working in the post page, but i am missing the "displayExcerpt" and "displayTitle" on the front page. A little unsure what I'm missing, I swapped "titles" and "excerpt" for "hero. post" and "more.articels" to "displayTitle" and "displayExcerpt". What am I doing wrong?

AI Update

It sounds like you're working on a front page where you're trying to display post titles and excerpts, but the data isn't showing up. Based on your description, this is likely a GROQ query projection issue where the field names in your query don't match what you're using in your component.

The Problem: When you query for posts on your front page, you need to make sure your GROQ projection uses the same field names (displayTitle and displayExcerpt) that your front-end component is expecting.

Common mistakes:

  1. Mismatched field names: Your schema fields might be title and excerpt, but you're trying to access displayTitle and displayExcerpt in your component
  2. Missing projection: You might not be projecting (selecting) these fields in your GROQ query at all
  3. Incorrect aliasing: If you're renaming fields in your query, the syntax needs to be correct

The fix:

Your GROQ query for the front page should look something like this:

*[_type == "post"]{
  "displayTitle": title,
  "displayExcerpt": excerpt
}

The "displayTitle": title syntax creates an alias - it takes the title field from your schema and renames it to displayTitle in the query results. This is how projections work in GROQ - you can select specific fields and rename them to match what your frontend expects.

If you're working with a starter template (like the Next.js blog starter), the original queries might have used different field names. Make sure:

  1. Your GROQ query on the front page includes the fields you need in the projection
  2. The field names in the projection match what your React/Next.js component is trying to access
  3. If the actual schema fields are named title and excerpt, you either need to alias them in the query (as shown above) OR change your component to use title and excerpt instead of displayTitle and displayExcerpt

The query is likely in a file like lib/queries.ts, sanity/lib/queries.ts, or directly in your page component. Double-check that both your front page query and your post page query use the same field naming - if the post page is working, copy that projection structure to your front page query and it should work consistently.

Show original thread
14 replies
Hi, will this be followed up?
user M
Hey User! As I recall from your previous thread, you'll need to do two things:1. Make sure your query is fetching those fields
2. Make sure you're rendering the data that's fetched.
Feel free to share your current code and I can take a look again.
studio/schemas/post.js: 
export default {
  name: 'post',
  title: 'Artikler',
  type: 'document',
  fields: [

    {
      name: 'displayTitle',
      description: 'Title for displaying on the FRONT PAGE',
      title: 'Display Title',
      type: 'string'
    },
    {
      name: 'displayExcerpt',
      description: 'Excerpt for displaying on the FRONT PAGE',
      title: 'Display Excerpt',
      type: 'string'
    },
    {
      name: 'displayImage',
      description: 'Image for displaying on the FRONT PAGE',
      title: 'Display Image',
      type: 'image'
    },
    {
      name: 'title',
      title: 'Display Main Title',
      description: 'Title for displaying on the POST PAGE',
      type: 'string'
    },
    {
      name: 'excerpt',
      title: 'Display Excerpt',
      description: 'Excerpt for displaying on the POST PAGE',
      type: 'text',
    },
    {
      name: 'slug',
      title: 'Slug',
      description: 'Displaying in the end of the URL',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      name: 'mainImage',
      title: 'Main image',
      description: 'Image for displaying on the POST PAGE'
      type: 'image',
      options: {
        hotspot: true
      }
    },
    {
      name: 'tags',
      title: 'Tags',
      type: 'tags',
    },
    {
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{type: 'reference', to: {type: 'category'}}]
    },
    {
      name: 'author',
      title: 'Journalist',
      type: 'reference',
      to: {type: 'author'}
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime'
    },
    {
      name: 'body',
      title: 'Body',
      type: 'blockContent'
    }
  ],

  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage'
    },
    prepare(selection) {
      const {author} = selection
      return Object.assign({}, selection, {
        subtitle: author && `av ${author}`
      })
    }
  }
}

template/components/hero-post.js:
import Avatar from '../components/avatar'
import Date from '../components/date'
import CoverImage from '../components/cover-image'
import Link from 'next/link'

export default function HeroPost({
  title,
  coverImage,
  date,
  excerpt,
  author,
  slug,
  displayExcerpt,
  displayTitle
}) {
  return (
    <div>
      <div className="mb-5 md:mb-5">
        <CoverImage slug={slug} imageObject={coverImage} title={title} url={coverImage} />
      </div>
      <div className="md:grid md:grid-cols-1 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
          <p className="text-1xl lg:text-2xl leading-relaxed mb-4">{displayExcerpt}</p>
          <h3 className="mb-4 text-7xl lg:text-8xl leading-tight">
            <Link as={`/posts/${slug}`} href="/posts/[slug]">
              <a className="hover:underline">{displayTitle}</a>
            </Link>
          </h3>
      </div>
    </div>
  )
}
Is this correct?
That looks correct. What does it look like on your frontend?
template/pages/index.js
import Container from '../components/container'
import MoreArticles from '../components/more-articles'
import HeroPost from '../components/hero-post'
import Navbar from '../components/Navbar'
import Layout from '../components/layout'
import { getAllPostsForHome } from '../lib/api'
import Head from 'next/head'
import styles from '../styles/Home.module.scss'

export default function Index({ allPosts, preview }) {
  const heroPost = allPosts[0]
  const morePosts = allPosts.slice(1)
  return (
    <>
      <Layout preview={preview}>
        <Head>
          <title>******* | ******</title>
        </Head>
        <Navbar />
        <Container>
          {heroPost && (
            <HeroPost
                title={heroPost.title}
                coverImage={heroPost.coverImage}
                date={heroPost.date}
                author={heroPost.author}
                slug={heroPost.slug}
                excerpt={heroPost.excerpt}
                displayTitle={heroPost.displayTitle}
                displayExcerpt={heroPost.displayExcerpt}
            />
          )}
          {morePosts.length > 0 && <MoreArticles posts={morePosts} />}
        </Container>
      </Layout>
    </>
  )
}

export async function getStaticProps({ preview = false }) {
  const allPosts = await getAllPostsForHome(preview)
  return {
    props: { allPosts, preview },
    revalidate: 1
  }
}
Displayexcerpt and displayTitle doesn't show.
user M
was this what you meant? Please let me know so I can learn how to get it right! ☺️
Can you share your repo?
Can you share your repo?
Got it. Your query isn't fetching 'displayExcerpt' or 'displayTitle', so there's not data to render in your component.
How do I make the query fetch ‘displayExcerpt’ and ‘displayTitle’ in the component?
You could need to add it to the 
postFields
const here .
Thanks! It worked now 👍
Nice! Glad we got it sorted out!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?