Next.js/Sanity中如何查询数组内全部图片？

我正在使用Next.js/Sanity，想要从数组中获取当前slug下的所有图片类型数据，但页面无内容显示且控制台无输出。添加日志检测后发现系统能识别到数组存在且图片数量正确，但每个图片的数据均为null，不确定imagesQuery的写法是否正确。

代码如下：

export const getServerSideProps = async (pageContext) => {
  const setSlug = pageContext.query.slug;

  const setQuery = `*[_type == 'set' && slug.current == $setSlug][0]`;
  const imagesQuery = `*[_type == 'set' && slug.current == $setSlug][0]{image{
    asset->{_id, url}, alt, name, date, size, materials}}}`;

  const setData = await client.fetch(setQuery, {setSlug});
  const imagesData = await client.fetch(imagesQuery, {setSlug});

  return {
    props: {setData, imagesData}
  }
}

解决方案 #

• 先核对字段名：如果图片是数组类型，字段名大概率是images（复数）而非image（单数），Sanity里数组字段通常用复数命名，这会导致你查的image字段返回null，实际数组数据在images字段中。
• 修正GROQ查询：针对数组类型的图片，需要用[]遍历数组元素并获取关联的asset数据，正确的查询写法如下：

  *[_type == 'set' && slug.current == $setSlug][0]{
    images[] {
      asset->{_id, url},
      alt,
      name,
      date,
      size,
      materials
    }
  }
  

• 合并查询减少请求：没必要分开请求两次数据，把所需的set信息和图片数据放在同一个查询里，既能提升性能也更简洁：

  export const getServerSideProps = async (pageContext) => {
    const setSlug = pageContext.query.slug;
  
    const combinedQuery = `*[_type == 'set' && slug.current == $setSlug][0]{
      // 这里添加你需要的set类型其他字段，比如title、description等
      ...,
      images[] {
        asset->{_id, url},
        alt,
        name,
        date,
        size,
        materials
      }
    }`;
  
    const setData = await client.fetch(combinedQuery, {setSlug});
  
    return {
      props: {setData}
    }
  }
  

• 验证字段完整性：在组件里打印setData.images，确认每个图片对象里的alt、name等字段是否和Sanity后台定义的一致，避免字段名拼写错误导致数据为null。

内容的提问来源于stack exchange，提问作者paparonnie