Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign Up for Free
Community Plugin
View plugin on GitHub


Source plugin for pulling data into Gatsby from a Google Sheets document

## A note on versions

I haven’t really used this very extensively lately but have tried to upgrade it for Gatsby 2.x.

  • If using Gatsby 1.x, do npm i gatsby-source-google-sheet@1
  • If using Gatsby 2.x+, do npm i gatsby-source-google-sheet@2

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
     * Gatsby's data processing layer begins with “source” plugins. Here we
     * setup the site to pull data from a particular Google Sheet
      resolve: `gatsby-source-google-sheet`,
      options: {
        // For protected spreadsheets you can use two-legged OAuth as described here:
        creds: {
          client_email: ``,
          private_key: `<long private key stuff>`
        // This is the bit after "/d/" and before "/edit" in the URL of a
        // Google Sheets document. I.e.,
        spreadsheetKey: `1ec1bO25bbEL4pdZjhlV3AppMtnO65D0ZI8fXy4z47Dw`,
        rootName: "RootName" // default is Sheet
With .env (if you make your code public)
  1. Run npm install dotenv --save-dev

  2. Create .env in the root folder and fill with the credentials

  1. Add require('dotenv').config() on top of gatsby-config.js, and edit the creds object
  creds: {
    client_email: process.env.GS_CLIENT_EMAIL || ``,
    private_key: process.env.GS_PRIVATE_KEY.replace(/\\n/g, '\n') || ``

Plugin options

  • creds: Object containing client_email and private_key, for non-public sheets.
  • spreadsheetKey: The key of the spreadsheet you want to consume via GraphQL.

How to query your spreadsheet data using GraphQL

Below is a sample query for fetching three columns in a spreadsheet.

query GetGoogleSheetsColumns {
  allGoogleSheet$rootName {
    edges {
      node {
© 2022 Gatsby, Inc.