Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Missing "displayExcerpt" and "displayTitle" fields on the front page. Code and schema provided. Query needs to fetch those fields. Issue resolved with help.

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?

Oct 25, 2021, 10:39 PM
Hi, will this be followed up?
user M
Nov 1, 2021, 2:17 AM
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.
Nov 1, 2021, 7:34 PM
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?
Nov 1, 2021, 8:09 PM
That looks correct. What does it look like on your frontend?
Nov 1, 2021, 8:28 PM
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.
Nov 1, 2021, 8:56 PM
user M
was this what you meant? Please let me know so I can learn how to get it right! ☺️
Nov 2, 2021, 9:46 PM
Can you share your repo?
Nov 2, 2021, 9:53 PM
Can you share your repo?
Nov 2, 2021, 9:53 PM
Nov 2, 2021, 10:09 PM
Got it. Your query isn't fetching 'displayExcerpt' or 'displayTitle', so there's not data to render in your component.
Nov 2, 2021, 10:15 PM
How do I make the query fetch ‘displayExcerpt’ and ‘displayTitle’ in the component?
Nov 2, 2021, 10:19 PM
You could need to add it to the 
postFields
const here .
Nov 2, 2021, 10:21 PM
Thanks! It worked now 👍
Nov 2, 2021, 10:24 PM
Nice! Glad we got it sorted out!
Nov 2, 2021, 10:25 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?