Next picture function inside Modal and use of Airtable API

I have to admitted that this one is tough, I have use Airtable as CMS and file system database as well without any of backend codes from me. I only used the API Airtable provided so it definitely has limitations. I will talk about switch from gatsby-airtable-plugin into Airtable API as well.

So, next button in Modal was not easy. If we use the gatsby-airtable-plugin. It is sure that the experience might be good but it has downside when we store more and more pictures. Because of Gatsby and static site generator signatures, every time we change in the database, we have to re-built and re-deploy the site again. So, I did change to use only Airtable API and every time we add a picture, we do not need to worry about re-deploy anymore. Besides, when used Airtable Gatsby plugin, the GraphQL query also generate rowIndex for me, not from the API. And I have to add an automatic number column to add the index id for each row. From there, I can perform the retrieve and update functions; using next and previous buttons by the use of

index (index + 1 for the next picture and index - 1 for the previous one).

-code

Airtable is good, but very limit on the backend API, I could not find the function to perform it directly to backend. Therefore, I have to pass the list of pictures to the child component, constantly compare between index id and Airtable id (we can only update by Airtable ID, which is hashed and can not use operator simply).

Change from Airtable CMS function to Airtable API is fun and there is nothing special about it. Just using useState and set state to the records when we have a response back. I am still researching the way to fetch the data part by part, so we do not need to worry about data load. But it seems that difficult, again, Airtable has limit functions to interact with backend database, so, at the moment, I can just only call all-at-once, using React.Suspense to render them.