Trouble accessing array of objects fields with GROQD

[pjosdev]

Hello,

FIGURED IT OUT (thanks Gemini)
I had to do a sub-projection and access that query builder object for it to correctly project from nested objects (I think):

export const getDraggablePhotos = q.star
  .filterByType("draggablePhoto")
  .project((sub) => ({
    // 'doc' now represents the 'draggablePhoto' document
    _id: z.string(),
    title: z.string(),
    photos: sub.field("photos[]").project((photoItem) => ({
      photo: photoItem.field("photo.asset").deref().field("url"),
      alt: z.string(),
      label: z.string(),
    })),
  }));

PROBLEM
I've been using GROQD on a personal project and enjoying it. But today I've been having a bit of trouble accessing array fields and was wondering if someone could help me understand how to access these properties correctly.

Type

import { defineField, defineType } from "sanity";

export const draggablePhotoType = defineType({
  name: "draggablePhoto",
  title: "Draggable photos",
  type: "document",
  description: "Draggable photos of food to display on the site home page",
  fields: [
    defineField({
      name: "title",
      title: "Photo Collection Title",
      type: "string",
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: "photos",
      title: "Collection Photos",
      type: "array",
      validation: (rule) => rule.required(),
      of: [
        {
          type: "object",
          fields: [
            defineField({
              name: "photo",
              title: "Photo",
              type: "image",
              options: { hotspot: true },
              validation: (rule) => rule.required(),
            }),
            defineField({
              name: "alt",
              title: "Alt Text",
              type: "string",
              validation: (rule) => rule.required(),
            }),
            defineField({
              name: "label",
              title: "Label",
              type: "string",
              validation: (rule) => rule.required(),
            }),
          ],
          preview: {
            select: {
              title: "label",
              subtitle: "alt",
              media: "photo",
            },
          },
        },
      ],
    }),
  ],
});

Query

export const getDraggablePhotos = q.star
  .filterByType("draggablePhoto")
  .project((sub) => ({
    _id: z.string(),
    title: z.string(),
    photos: sub.field("photos[]").project({
      photo: sub.field("photo.asset").deref().field("url", z.string()),
      alt: z.string(),
      label: z.string(),
    }),
  }));

The above query returns the correct data but GROQD flags a type error

The query below satisfies GROQD type checking

import { q } from "@/sanity/lib/groqd";
import { z } from "zod";

export const getDraggablePhotos = q.star
  .filterByType("draggablePhoto")
  .project((sub) => ({
    _id: z.string(),
    title: z.string(),
    photos: sub.field("photos[]").project({
      photo: sub.field("photos[].photo.asset").deref().field("url", z.string()),
      alt: z.string(),
      label: z.string(),
    }),
  }));

but throws a runtime error in the Nextjs application.

ValidationErrors: 4 Parsing Errors:
result[0].photos[0].photo: Expected string, received null
result[0].photos[1].photo: Expected string, received null
result[0].photos[2].photo: Expected string, received null
result[0].photos[3].photo: Expected string, received null
    at async DraggableFood (rsc://React/Server/webpack-internal:///(rsc)/./src/components/home/draggable-food/draggable-food.tsx?92:15:18)

Any help appreciated!

[scottrippey]

Glad you found the answer to the problem!
Just to explain the solution you found...

In GROQ, every nested projection has a nested scope too.
So in GroqD, every call to project gets a new parameter sub, which is almost the same thing as q, except it has the correct types for the nested scope.

Sometimes there's confusion because there's shorthand syntax that make the sub parameter optional.
For example, these are all exactly equivalent:

q.star.project(sub => ({
  slug: sub.field("slug.current", z.string())
}));
q.star.project(() => ({
  slug: ["slug.current", z.string()]
}));
q.star.project({
  slug: ["slug.current", z.string()]
});

Hopefully this explanation helps! Happy coding!