CODEWITHSUNDEEP
reactjsgoogle-sheetsfetch
Aaron Austin
Aaron Austin

Reputation: 225

Inconsistent response fetching data from Google Sheet via local react app

I've made a create-react-app that I build and run statically on my machine as an OBS plugin with no server using Hashrouter. I'm fetching data from a Google Sheet that I have set to public. Using a url in this format https://spreadsheets.google.com/feeds/list/{SpreadsheetID}/{sheetNo}/public/values?alt=json I'm able to fetch data as JSON to use in my app. However, the responses have become inconsistent in the past week with no changes to the app.

When I go to the URL in a browser, it never fails to load a plain text version of the JSON. However, when sending a GET request in my app, I get at 404 error 60% of the time. I've tried different headers in my request, but I can't seem to find anything that works consistently.

Here's the function where I do the fetch. I'm calling this from within a useEffect hook.

const getData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`fetch error. status: ${response.status}`);
    }
    return await response.json();
  } catch (err) {
    return err;
  }
};

The 404 response I get says: "Sorry, unable to open the file at this time. Please check the address and try again."

I figure it has something to do with the fact that I'm calling from a local file without a server running. I'd like to keep it this way if possible just to make things simple for OBS operators. I've tried adding an API key to my fetch url (key={APIKEY}) but that didn't seem to make any difference. Any thoughts on what might be causing this behavior?

Upvotes: 0

Views: 511

Answers (1)

MattKing
MattKing

Reputation: 7773

This is a known problem. Please see this thread. https://support.google.com/docs/thread/121088347

Upvotes: 3

Related Questions