GROQ query to Sanity returns undefined for whyChoseExamples field (Next.js 14 + Sanity)

Question

I'm working with Sanity.io and using a GROQ query to fetch data for my application. I'm trying to retrieve the whyChoseExamples field from my main document type, but it's returning undefined.

schema.ts

export const mainPage = {
  name: 'main',
  title: 'Strona główna',
  type: 'document',
  fields: [
    {
      name: 'header',
      title: 'Nagłówek',
      type: 'string',
    },
    {
      name: 'subheader',
      title: 'Podtytuł',
      type: 'string',
    },
    {
      name: 'buttonText',
      title: 'Text na przycisku',
      type: 'string',
    },
    {
      name: 'backgroundImage',
      title: 'Obraz tła',
      type: 'image',
      options: { hotspot: true },
      fields: [{ name: 'alt', title: 'Tekst alternatywny (SEO)', type: 'string' }],
    },
    {
      name: 'whyChose',
      title: 'Dlaczego warto nas wybrać',
      type: 'string',
    },
    {
      name: 'whyChoseTitle',
      title: 'Dlaczego warto nas wybrać - Tytuł',
      type: 'string',
    },
    {
      name: 'whyChoseSubtitle',
      title: 'Dlaczego warto nas wybrać - Podtytuł',
      type: 'string',
    },
    {
      name: 'whyChoseExamples',
      title: 'Dlaczego warto nas wybrać - Zalety współpracy',
      type: 'array',
      of: [
        {
          type: 'object',
          name: 'textWithImage',
          title: 'Karta zalet',
          fields: [
            {
              name: 'header',
              title: 'Tytuł',
              type: 'string',
            },
            {
              name: 'subHeader',
              title: 'Podtytuł',
              type: 'string',
            },
            {
              name: 'image',
              title: 'Image',
              type: 'image',
              options: {
                hotspot: true,
              },
              fields: [
                {
                  name: 'alt',
                  title: 'Tekst alternatywny (SEO)',
                  type: 'string',
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

groq query

export const getMainPageContent = async (): Promise<MainPage[]> => {
  const client = createClient({
    projectId: 'myprojectId',
    dataset: 'production',
    apiVersion: '2024-09-17',
  });

  return client.fetch(groq`
  *[_type == "main"]{
  header,
  subheader,
  buttonText,
  backgroundImage {
    asset->{
      _id,
      url
    },
    alt,
  },
  whyChose,
  whyChoseTitle,
  whyChoseSubtitle,
  whyChoseExamples{
    header,
    subHeader,
    image {
      asset->{
        _id,
        url
      },
      alt,
    }
  },
}
`);
};

When I run this query and try to access whyChoseExamples, it comes back as undefined.

What I've Tried:

Checked Field Names:

Ensured that all field names in my query match those in my Sanity schema exactly. Verified that it's whyChoseExamples, not whyChooseExamples. Confirmed Data Entry:

In Sanity Studio, the whyChoseExamples field is populated with data in my main document.

Used Sanity's Vision Tool:

Ran the query in the Vision tool within Sanity Studio. The whyChoseExamples field does appear in the results.

Additional Information:

Other fields like header, subheader, and whyChose are being returned correctly. There are no conditional fields or permissions set that would hide whyChoseExamples. I'm using the latest versions of the Sanity and Next.js

What could be causing the whyChoseExamples field to return undefined in my GROQ query, even though it's populated in the Sanity Studio and correctly defined in the schema? How can I modify my query or schema to successfully retrieve this field?

Any help would be greatly appreciated!

Answer 1

Instead of whyChoseExamples, I need to replace it with whyChoseExamples[] as it is an array type.