Trying to fetch response from Goodreads API

copy .env.example .env should do the trick on Windows.

Thanks, @RandellDawson. My windows knowledge is very rusty!

No, I’m using macOS.

You don’t see .env.example in the root of the repo you cloned?

Nope. It wasn’t there when I cloned the repo.

Look for hidden files.

The . hides files on Unix based systems.

cp probably worked, you just have the file hidden most likely.

The file tree in VSCode would show hidden files if you use that.

That did the trick, my friend! I’m using Atom and it was right there in the tree view. Onward! :grinning:

1 Like

@JacksonBates

So I’m now at the part of the README.md 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) {
    super(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>
        </header>
      </div>
    );
  }
}

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.

@JacksonBates

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.

@JacksonBates

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 (https://github.com/Dusch4593/book-finder-app). The problem seems to be coming from the backend.js, inside the relay route.

@JacksonBates

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.