Inserting links from Sheets into Gatsby with gatsby-source-google-spreadsheet

Question

I'm using the gatsby-source-google-spreadsheet plugin in Gatsby to create a list of elements on a page. The plugin is set up with my Sheets and is working well. I am struggling with how to insert a link as an <a href> when I'm pulling it in from a Sheet.

src/pages/index.js :

import React from "react"
import { graphql } from "gatsby"



export default ({ data }) => {
  const sheetData = data.allGoogleSpreadsheetSheetSheet.nodes;
  const rendered = sheetData.map(item =>
    <div className="section">

      <div className="section__when"> {item.day}, {item.date} at {item.time} </div>
      <div className="section__host"> {item.event}, {item.host} </div>
      <div className="section__link"> <a href="{item.link}" target="_blank">Access here. </a></div>
      <div className="section__description"> {item.description} </div>
    </div>);

  return rendered;
};


export const query = graphql`
  query {
    allGoogleSpreadsheetSheetSheet {
      nodes {
        event
        host
        link
        day
        time
        date
        description
      }
    }
  }
`;

This gives me an appropriate list but when I click on the link it tries to take me to: http://localhost:8000/%7Bitem.link%7D , which is obviously wrong. Right now, my Sheets just has the link https://www.google.com for each entry. How do I change the way the link div is structured to make it take me to an external link?

Answer 1

If you check your link you'll see that there is your variable name inside %7Bitem.link%7D means literally {item.link} , so your code doesn't recognize the variable and it's inserting as string {item.link} .

Assuming that you are retrieving and receiving the variables the data properly, as you said.

Try this:

import React from "react"
import { graphql } from "gatsby"



export default ({ data }) => {
  const sheetData = data.allGoogleSpreadsheetSheetSheet.nodes;
  const rendered = sheetData.map(item =>
    <div className="section">

      <div className="section__when"> {item.day}, {item.date} at {item.time} </div>
      <div className="section__host"> {item.event}, {item.host} </div>
      <div className="section__link"> <a href=`${item.link}` target="_blank">Access here. </a></div>
      <div className="section__description"> {item.description} </div>
    </div>);

  return rendered;
};


export const query = graphql`
  query {
    allGoogleSpreadsheetSheetSheet {
      nodes {
        event
        host
        link
        day
        time
        date
        description
      }
    }
  }
`;

Spot the difference in your anchor tag: <a href=`${item.link}` target="_blank">

Basically you are using template literals from ES6. They are string literals allowing embedded expressions and are enclosed by the backtick (`) (grave accent) character instead of double or single quotes.