Now we can move to the next pictures in the modal, all in bigger size!
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
+ 1for the next picture and
index - 1for the previous one).
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.