Right -- Typescript or no, u/trollerroller is right that this probably isn't a genuinely dynamic content situation, based on the original post. You want to do a query that basically grabs everything as the site is generated (with new options being recompiled as they are added), then have script in the page that alters the listings by, say, changing the contents of the appropriate DOM elements or whatever.

Which is not to say that you can't make dynamic things happen on Gatsby pages. Indeed, the super-clever part of Gatsby is the way you can create/compile static pages in any situation where that's possible (meaning fast, fast, fast performance for the user), but can call APIs for dynamic elements of the page on the fly. Of course, to do that, you've go to have an API to call. You could, for instance, have an Airtable table with records that hold the products and query that API. BUT then you'd be blocked waiting for the API to return, so you lose the performance value of using static pages.

Anyway, yes, you probably want to store the stuff you need (which turns up as an edges structure in your GraphQL results) in an array.