如何将此 react-style fetch-api 转换为 next.js？

Question

我刚刚意识到我从后端（Sanity）获取数据的方式比下一个更适合 React 应用程序，所以我正在尝试转换我目前拥有的内容。为了透明度，我试图调用图像数组中的第一个图像（以及 set_name，因此我尝试同时查询整个集合及其字段以及集合中的数组），

这是我最初必须从每组中提取图像的内容：

const [ galleryData, setGalleryData ] = useState(null);

useEffect(() => {
  client.fetch(
    `*[_type == 'set']{
      set_name,
      'setSelect' : set_images[0].asset->{_id,url}}`
  ).then((data) => setGalleryData(data))
  .catch(err => console.error(err))
})

这是我尝试过的，但出现服务器错误：

export const getServerSideProps = async () => {
  const query = '*[_type == "set"]';
  const set = await client.fetch(query)

  const imagesQuery = '*[_type == "set"]{set_images.asset->{_id,url}}';
  const setImages = await client.fetch(imagesQuery)

  return {
    props: {set, setImages}
  }

Answer 1

该错误来自 GROQ，因为您的部分投影 (set_images.asset->{_id,url}) 需要一个键值。尝试类似：

const imagesQuery = '*[_type == "set"]{'set_images': set_images.asset->{_id,url}}';