CODEWITHSUNDEEP
reactjsnext.jssanity
Alex Carliner
Alex Carliner

Reputation: 1

Data property not recognized (undefined) from rethrieval attempt in SANITY

I am a newbie in using Sanity CMS. I am trying to get access to a particular data named as a title in sanity server local side from my website project.

The bunch of datas coming from the "article.ts" file in SANITY SIDE PROJECT is correctly displayed on the WEBSITE SIDE PROJECT, except one DATA :

SANITY PROJECT SIDE

STEP 1 | MODIFY PROPERTY

schemaTypes\article.ts

defineField({
      name: 'h1',
      title: 'Title',
      type: 'string',
    }),

This property declared in SANITY side local server project, I have tried to rename it as this:

defineField({
      name: 'maintitle',
      title: 'Title',
      type: 'string',
    }),

Here is the check-up & updates I made accross the files:

STEP 2 | UPDATE TYPES ARCHITECTURE RENDERING

shortcut command to update the sanity.types.ts architecture statement DATAs.

//package.json file

"scripts": {
...
"generate": "sanity schema extract && sanity typegen generate",
...
},

npm run generate

WEBSITE PROJECT SIDE:

STEP 3 | REPLACE PREVIOUS ARCHITECTURE TYPES DATA BY NEWEST ONE

\types\sanity\sanity.types.ts

deleted the previous architecture DATA "sanity.types.ts"(version with the h1 property) replaced by the newest one "sanity.types.ts" (version with the maintitle property), coming from the generate launch command in SANITY SIDE PROJECT.

STEP 4 | RETHRIEVAL DATAS UPDATED

//src\pages\blog[slug]

rethrieval DATAs from client side project "slug" file

Changing "h1" into "maintitle".

export async function getStaticProps(context: { params: { slug: string } }) {
  const { slug } = context.params
  const article: Article = await sanityClient.fetch(
    `*[_type == "article" && slug.current == "${slug}"][0]{
    _id,
    date,
    maintitle,
    slug,
    categories[]->,
    image,
    intro,
  }`
  )

  return {
    props: {
      article,
    },
  }
}

\types\sanity\article.ts

updating "h1" -> "maintitle"

export type Article = {
  author: Array<Author>
  category: Array<string>
  data: string
  description: string
  maintitle: string
  image: Image
  slug: Slug
  ...
}

Then when I try to do a console.log(article.maintitle), why do I have a null (undefined) return?

src\pages\blog[slug]

...some code...
export async function getStaticProps(...) {
...
}

export default function Index(props: { article: Article }) {
  const { article } = props
  //article.intro![0].children[0].text
  //console.log(
  //  article.intro
  //    ? article.intro[0].children.map(
  //        (props: any, index: number) => (props, index)
  //      )
  //    : null
  //)
  //console.log(article.intro ? article.intro : null)
  console.log(article ? article : null)

  return (
    <div>
      <div className="flex flex-row">
        <div className="flex bg-white sm:max-w-xs"></div>

        <div>
          {article.maintitle ? article.maintitle : null}
          {article.intro ? <RichText value={article.intro} /> : null}
          {article.date ? article.date : null}
          {article.author ? <Author data={article.author} /> : null}
          <div className="flex flex-row">
            {article.categories
              ? article.categories.map((e, idx) => (
                  <Category data={e} key={idx} />
                ))
              : null}
          </div>
        </div>
      </div>
    </div>
  )
}

Which file did I miss to update/change h1 property?

Knowingly that this property is a string and not a blockContent (so not rethrieving from portableText).

Any help is welcomed.

All other properties display well.

Upvotes: 0

Views: 99

Answers (1)

Alex Carliner
Alex Carliner

Reputation: 1

In SANITY, despite the ease of use and implementation for intermediary levels developers, it's really easy to lost itself in the successive steps permitting to get what we search to reach.

I finally solved the problem in which I was stucked for more than 2 days.

1st STEP | SANITY STUDIO (Production Mode) UPDATES NOT APPLIED

It's obvious that if you run into the problem that stops automated status updates of your SchemaTypes in the SANITY studio (production preview mode), you'll have to wait a long time before you see any changes.

Manually update the property change you make with this command:

npm run build | sanity build

Will allow you to push your data modifications/additions to your studio deployed in production.

2nd STEP | DOCUMENT STATE CREATION "VERSION"

When you create a new article in the first based default model version (production preview mode | Sanity Studio), this model will take the default properties of the 1st SANITY version not modified the 1st time of use.

You need to delete this 1st document you have created, stucked in default properties.

Then, to access the newly properties added in the last version architecture of your SANITY Server, you create a new "Article".

You will discover easily the newest properties you added.

Upvotes: 0

Related Questions