Search code examples
reactjsxmlhttprequestgatsbypapaparse

XMLHttprequest is not defined in Gatsby-node + react-papaparse

I am new to react and gatsby, but it looks a little fun to learn. So my idea is to build a website that has a page from each row of Google Sheets. So you can say I want to make google sheets CMS. There are other easier tools to use for this, but some just stop developing and some are hella expensive to use. So I want to make it manually using papaparse plugin.

My google sheets are "published for web" in the form of CSV. I want to use react-papaparse for in-browser CSVtoJSON parsing. My gatsby-node.js is copying from the gatsby docs so it is a little barebone.

in my gatsby-node.js

const papaparse = require("react-papaparse")

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  const { createNode } = actions

  const myData = papaparse.readRemoteFile("published sheet links",{
    download: true,
    header: true,
    delimiter: ',',
    dynamicTyping: true,
  })

  const nodeContent = JSON.stringify(myData)

  const nodeMeta = {
    id: createNodeId(`my-data-${myData.key}`),
    parent: null,
    children: [],
    internal: {
      type: `MyNodeType`,
      mediaType: `text/html`,
      content: nodeContent,
      contentDigest: createContentDigest(myData)
    }
  }

  const node = Object.assign({}, myData, nodeMeta)
  createNode(node)
}

When I run, it throws XMLHttpRequest is not defined error in my google sheet links. So it seems about CORS problem? What is the workaround for this?

Thank you

Solution

  • I'm afraid you won't be able to use XMLHttpRequest since it will be never available in the Node server (for obvious reasons), it will be available on your browser-side, but in your use-case, you need it to be available in the Node server, at the build-time, to create your schema.

    You can try using some other fetching methods (fetch, axios, etc) or use some plugins like gatsby-source-google-sheets. You just need to install the plugin and:

    {
    resolve: 'gatsby-source-google-sheets',
    options: {
        spreadsheetId: 'get this from the sheet url',
        worksheetTitle: 'ie the name in the worksheet tab',
        credentials: require('./path-to-credentials-file.json')
    }
},

    This will fetch in the build-time your sheets, creating the inferred GraphQL node schema

    Resources: