After happily accepting the invitation, we got together to plan and build the event site and, the tool of choice was, without much surprise, GatsbyJS. The site was pretty basic and it was used to list the speaker, date, and time of each talk. To make updating the site content easier, we decided to use a Google Spreadsheet
I will list some of the benefits of using a Google Spreadsheet
For this particular case, we used the . I have to mention that I rather like to extend Gatsby implementations from a theme to be able to keep in sync with theme updates but also to simplify override features. But for a site this simple using a starter works great.
We decided to use the gatsby-source-google-spreadsheet plugin.
This plugin allows you to source all data from a Google Spreadsheet into a GraphQL type for build-time consumption.
The plugin is based on the node-sheets package and the Google Sheets API V4, which allows for better value types and column names than many of the other Gatsby Google Sheets source plugins.
Authentication shown in this example is using an api key you have created in the google developers console.
Plugin configuration using your file:
Note we are using a stringified version of the google-service-account data and then use the environment variable in order to provide the data to the Gatsby site to avoid having the file deployed or committed by mistake on the repository.
We decided to make it simple by mapping previously uploaded speaker-avatar images with the field stored on the sheet by adding code to at file.
Validate is equal to to affect only this node types.
Read avatar field value from sheet data and if null then we defaulted as .
Next step, use the function to retrieve the from Gatsby and if not found, then retrieve the default using as search value.
Finally, add the node using the function and passing current as parent and the retrieved as child.
Add the GraphQL query to retrieve the sheet data ordered by date field.
Note we are using the node added via the file.
Iterating and showing the GraphQL result data on the page.
Nothing fancy here, just usage of the function to iterate and pass current item properties to the React component.
You can click here to take a look at the PostList component code.
In order to accomplish this task, it was necessary to add a script to the Google Spreadsheet. This was done by selecting the menu item > and adding this code.
This will add a new menu item on your Google Spreadsheet menu. By clicking this you will be able to trigger a new deploy to Netlify without leaving your sheet.
Make sure you replace the placeholder with the build_hooks value from your Netlify project.
Thanks to Richard B. Kaufman López for sharing with me the initial code snippet to deploy to Netlify from a Google Spreadsheet.
If interested you can:
Do you think you have any other feature idea or comment you think could be interesting or useful. Let us know in the comments below.