如何将照片注入 Gatsby 网站？

Question

我有一个 Gatsby 和 Strapi 照片博客，我想要一个主页，一次加载 10 张图片，直到用户点击页面底部，然后加载接下来的 10 张等，这样用户就不会一次下载所有照片。

我最初使用useStaticQuery 加载图像。但是，这只能在构建时运行。当用户点击页面底部并将其添加到我的状态时，有没有办法进行另一个 graphQL 调用？或者这是静态站点生成器的“静态”部分？？？？。

或者，如果我不渲染它，是否对所有照片数据进行 graphQL 调用会到达客户端设备？假设我一次只使用 React 渲染数组的一部分？

下面是我的主页。我使用的是Karl Run's bottom scroll listener，照片组件将照片呈现为列表。

const IndexLayout: React.FC<Props> = () => {
  const [photosData, setPhotosData] = useState<InitialQueryType['allStrapiPhoto']>(getSiteMetaDataAndTenPhotos().allStrapiPhoto)

  const handleOnDocumentBottom = useCallback(() => {
    console.log('at bottom, make a call')

    // this throws an invalid hook error as getTenPhotos calls useStaticQuery
    let morePhotosData = getTenPhotos(photosData.edges.length)

    setPhotosData({ ...photosData, ...morePhotosData })
  }, [photosData])

 useBottomScrollListener(handleOnDocumentBottom)

  return (
    <LayoutRoot>
      <div className={styles.bigHomeContainer}>
        <div className={styles.titleContainer}>
          <h1 className={styles.indexHeading}>TayloredToTaylor's Wildlife Photos</h1>
        </div>
        <Photos photos={photosData} />
      </div>
    </LayoutRoot>
  )
}

export default IndexLayout

Github Repo

Answer 1

正如您所说，查询是在构建时调用的。但是，一种可能对您有用的解决方法是在开始时（构建时）检索所有照片，并按时间或用户滚动等触发的 10 组按需显示它们。根据您的使用调整类似这样的内容-case 应该可以工作：

获取所有照片：

  const allPhotos=<InitialQueryType['allStrapiPhoto']>(getSiteMetaDataAndTenPhotos().allStrapiPhoto)

设置当前currentIndex：

const [currentIndex, setCurrentIndex]= useState(0);

并按需询问他们：

const morePhotosData = ()=>{
   let cloneOfAllPhotos= [...allPhotos];
   let newPhotos= cloneOfAllPhotos.splice(currentIndex, currentIndex + 10) // change 10 to your desired value
   
   setPhotosData(newPhotos);
   setCurrentIndex(currentIndex+10);
}

基本上，您正在克隆allPhotos (let cloneOfAllPhotos= [...allPhotos]) 来操作该副本并使用动态索引 (cloneOfAllPhotos.splice(currentIndex,currentIndex + 10)) 拼接它们，该动态索引在morePhotosData 的每个触发器中增加 10。