如何將照片注入 Gatsby 網站？

Question

我有一個 Gatsby 和 Strapi 照片博客，我想要一個主頁，一次加載 10 張圖片，直到用戶點擊頁面底部，然后加載接下來的十張等，這樣用戶就不會下載所有照片立刻。

我最初使用useStaticQuery加載圖像。 但是，這只能在構建時運行。 當用戶點擊頁面底部並將其添加到我的 state 時，有沒有辦法進行另一個 graphQL 調用？ 或者這是 static 站點生成器的“靜態”部分。

或者，如果我不渲染它，是否讓所有照片數據的 graphQL 調用進入客戶端設備？ 假設我一次只使用 React 渲染數組的一部分？

下面是我的主頁。 我正在使用Karl Run 的底部滾動偵聽器，並且 Photos 組件將照片呈現為列表。

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 回購

Answer 1

正如您所說，查詢是在構建時調用的。 但是，一種可能對您有用的解決方法是在開始時（構建時）檢索所有照片，並按時間或用戶滾動等觸發的 10 組按需顯示它們。根據您的使用調整類似這樣的內容- 案例應該工作：

獲取所有照片：

  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) ) 拼接它們，該索引在每次觸發時增加 10 morePhotosData 。