如何将照片注入 Gatsby 网站？

Question

I have a Gatsby and Strapi photo blog and I want to have a home page that loads 10 pictures at a time until the user hits the bottom of the page, then load the next ten etc, so that the user isn't downloading all photos at once.

I'm using useStaticQuery to load the images initially. However, that can only run at build time. Is there a way to make another graphQL call when the user hits the bottom of the page and add it to my state? Or is this the "static" part of a static site generator.

Alternatively, does making the graphQL call for all photo data make its way to the client device if I don't render it? Say if I just use React to render parts of the array at a time?

Below is my home page. I'm using Karl Run's bottom scroll listener , and the Photos component renders the photos as a list.

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

As you said, queries are called in the build-time. However, one workaround that may work for you is to retrieve all photos at the beginning (build-time) and show them on-demand in groups of 10 triggered by time or by the user's scroll, etc. Adapting something like this to your use-case should work:

Fetch all photos with:

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

Set the current currentIndex :

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

And ask them on-demand:

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

Basically, you are cloning the allPhotos ( let cloneOfAllPhotos= [...allPhotos] ) to manipulate that copy and splicing them with a dynamic index ( cloneOfAllPhotos.splice(currentIndex,currentIndex + 10) ) that is increasing by 10 in each trigger of morePhotosData .