Dynamically fetching data from CMS

[MathiasHandle]

Hi, Im working on my first project with Gatsby. Im building a photographer portfolio site and Id like to fetch images in gallery, but Id like to filter them based on category as well. I store my images on Strapi CMS and use graphql plugin.

Currently I fetch 10 images via page query at the build time, hovever Id like to implement infinite scrolling, so when user scrolls down another 10 photos will be loaded. Also if user clicks on some category only images in that category will be loaded.

How should I go about this? Is there a way to trigger page query with variable (category) when user scrolls down the page?

[nibtime]

Hi @MathiasHandle

It is not possible to say "execute the page query with runtime parameter category" in client-side code. You can do static pagination, the most classic way would be by defining a parameter "page size" known at build time and by a query that gives you the total number of items of a static collection (e.g. blog posts, photos, etc.). Then you can generate total number of items/page size collection index pages, where each page holds max. page size items. The collection items are distributed over page size different routes, so there isn't such a thing as "display more" then, just "display others" and that is achieved by navigating to one of those collection index pages. You could of course also group them by category and generate one collection index page per category and also paginate each category. But the limiting thing here is, that the number of items per page/route is always fixed at build-time. So if anything around the pagination pattern you want is dependent on client-side input, you can't solve it with Gatsby and page queries alone.

Then, you have to implement the pattern with React and client-side data fetching (of course, you can do that within Gatsby pages or components). For such patterns, I can recommend you the swr package and its docs for pagination. You would make use of the REST/GraphQL API of Strapi inside the useSWR hook to implement your infinite loading pattern. The endpoint has to be public and user interactions on your site will induce additional load on your Strapi instance (useSWR gives you good control to keep that in well-defined bounds though). However, if the dynamic data fetching yields images to display, you can't have them optimized with Gatsby, as it has no dynamic image optimization capabilities. You could add those capabilities with an image optimization service like imgix though.

Another possibility would be a "pseudo load more", where the page holds all the static data (including data of statically optimized images) in a single page-data document, but you just control visibility client-side. This would be a blend between the two. You could then group+filter the static data by category and "Load more" would just make more slices of statically available data visible instead of actually fetching new slices of data from some API at runtime. If the amount of static data is really huge or your data changes quite frequently, this is not a good idea though. If it isn't, a reusable component with useStaticQuery could be a good option for your use case.

[MathiasHandle]

Thank you for your response! I think I ll go with the last option as this site is only a mock site for my portfolio, I ll store up to 40 images at most.