如何将这种React式的fetch-api转换为next.js?

qni6mghb  于 2022-11-05  发布在  React
关注(0)|答案(1)|浏览(131)

我刚刚意识到我从后端(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}
  }
vfh0ocws

vfh0ocws1#

该错误来自GROQ,因为投影(set_images.asset->{_id,url})的一部分需要一个键值。请尝试以下操作:

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

相关问题