Trying to fetch response from Goodreads API


So I’m now at the part of the where I’m trying to apply the backend to my frontend (the “How do you use this in your front end?” section).

I keep running into this Type Error, though:

I can’t tell whether this error is coming from the backend.js file that has code from the example you provided, or my `app.js’ file:

import  React  from 'react'
import  fetchGoodReads  from './backend'
class App extends React.Component {
  constructor(props) {
    this.state = {
      query: '',
      loading: false,
      itemsFound: []

  render() {

    return (
      <div className="app">
        <header className="app-header">
          <h1>Book Finder App!</h1>
          <h4>What Will Your Next Read Be?</h4>

export default App;

I’ve confirmed the server is running and it passes the tests on Postman, but when I run npm start, I keep getting that TypeError.


So I think I found out why I was getting that TypeError: fetchGoodReads is an immediately-invoked function expression (IIFE). I’m guessing that means it can’t be imported in app.js?

Try pulling the latest version of the repo, it no longer uses an IIFE.

Alright, so I went ahead and did that. I’m getting a 500 error on the Postman test. I doubled checked the api_key was pasted in my .env correctly but I can’t seem to get around this.

Does your terminal running the backend tell you what the error is?

Oh, I should point out the new version expects a GET request, in case you missed it.


Yeah I set it to GET on Postman and every time I send for a response, I get the 500 error plus the json response:

    "success": false,
    "message": "Text data outside of root node.\nLine: 0\nColumn: 16\nChar: ."

The terminal doesn’t seem to be showing anything about the 500 error. It just keeps saying “Example app listening on port 3000!”

Do you have a GitHub repo for this code?

I don’t have a repo of the code on Github, no.

It’s pretty hard to debug without seeing the code.

I googled the specific error, but every result I found suggested a different cause - so all I can suggest without seeing the code is go through every search result for the error methodically until you find the one relevant to your use case.

It seems like an error that happens reasonably often with XML from what I can tell - but pinning down the cause without the code to verify it is hard.

I see. So I went ahead and created a repo with the code ( The problem seems to be coming from the backend.js, inside the relay route.


I think I found the cause of the 500 error!

The .env file wasn’t in the same directory as the backend.js file. I tested it on Postman and it returned the JSON with "success": true when the environment file was in the same directory as the running backend file (they are both inside a file called src.

Would I also need to put the gitignore file inside the src folder in order for .env to be ignored or does it not matter?

1 Like

You can just add src/.env to the .gitignore if the file is in a different folder.

Okay so at this point, I’m trying to display the GET data to the front end but I can’t figure out how to get that data from backend.js to app.js. Is there a way to do that?

Keep in mind I have a completely separated front end and back end…So, my back end could be on Heroku, while my front end could be served from GH pages, or Netlify for example.

For this demo, I had my backend running locally on port 3000 and my front end running on 8080.

I had to make a change to the backend to allow CORS access from anywhere - you would change this behaviour depending on your needs.

With all that said, here is a very rough demo. It uses Hooks and Async, which you may not be comfortable, but it should be enough to demonstrate that you basically hit the new endpoint the way you would have hit the GoodReads original API:

The important stuff is in the Component.js file.


So I went and tried to implement the front end and back end (easier to say ‘fullstack’?) and I’m running into the CORS access problem, despite experimenting with making changes in the backend such as:

Here’s what the front end from 8080 looks like:

Where in the backend would changes need to be made to allow CORS access?

Did you see the CORS stuff I added to my backend, in app.js?

var cors = require("cors");
// Allow CORS from any origin

(I omitted some code from the above example, but the full thing is in the backend repo I linked to above)

That did the trick!

Thank you so, so, so much @JacksonBates for your patience and kindness in helping me with this. Thanks to you, I now have a little bit of experience with the backend aspect of web development and I’m going to come back to this thread as I keep working on this project and other projects that involve working with APIs.

1 Like

Glad to help, and congratulations for sticking with it - that’s the hard part.

Just wanted to suggest, instead of creating a back-end server which would just do one task, but run full time which is expensive. A cheaper approach would be using function like AWS Lambda or Google Cloud Functions which are executed only when they are invoked and their price is calculated only on the time it took to execute them.