Lift-off Part 1: Error Fail to Fetch

I’ve been trying to follow the Lift-Off Part 1, and I seem to have run into an error in the client part of it all. I keep getting the message ERROR: Failed to Fetch on the Localhost. The Catstronaut header and Apollo Footer will show up just fine, but the the middle part where everything else should be just gives me an error message. Anyone know what’s going on?

Hello Kevin, thank you for reaching out and learning with Apollo Odyssey.

The error you’re seeing comes form the client’s inability to communicate with the graphQL server.
Some possible source of this problem:

  • your graphQL server is not running
  • The uri value in the client config (in client/src/index.js) has a typo, or is not pointing to your server’s address
const client = new ApolloClient({
  uri: 'http://localhost:4000', // <- this could be the issue if not set correctly
  cache: new InMemoryCache(),
});

Can you try double checking those points and see it that fix the problem?

Best,
Raph

Yes, it seems to be working now. I didn’t have the graphQL server running. Thanks.

2 Likes

Dear Raph,

I am having similar problem in LIFT_OFF V. i have successfully deployed my server to Heroku and i can query it using Apollo explorer. But when i deployed my client app and the home page is loaded i can’t get any data. I only see “ERROR: Response not successful: Received status code 400” as if my frontend can’t communicate with server. please i need your assistant to resolve this. note: that the header and footer was loaded.

Hello @Damisa_Abdullahi
this seems to be a different error, potentially linked to the query itself on your client app.
Can you please share your client and server repos, it’ll make it easier to help, thanks!
Best,
Raph

@Raph. thank for your respond.

Here are the repo:

Server: GitHub - abdamsab/odyssey-lift-off-part5-server: Odyssey Lift-off V - Server - Course Companion App
Client: GitHub - abdamsab/odyssey-lift-off-part5-client: Odyssey Lift-off V - Client - Course Companion App

anticipating your kind assistance.

problem solved. the repo i clone suppose to use length instead of durationInSecond at this stage of the course. I replaced all the durationInSecond with length and it work. thank everyone for their time especially @MichelleMabuyo.

1 Like

Hi Raph and everyone,

Im doing the same activity as mentioned in this thread (
Lift-off Part 1) and Im also getting the error [Error Fail to Fetch] when running npm start in “The use Query Hook” part of the tutorial. The only difference is that Im not seeing any header on the local host. It is only the “Error! Failed to fetch” at the very top left of my screen and the rest of the window is white. I double checked the client>src>index.js (even posted and pasted the example you presented).
const client = new ApolloClient({
uri: ‘http://localhost:4000’,
cache: new InMemoryCache(),
});

But still getting the same error. Any idea of what else could be causing the problem?
Many thanks in advance!

Hey @Angelica ! Is your server running and working successfully?

Hi Michelle! Yes, everything was working before I reached that part of the tutorial

Ok great - usually the error happens when the server isn’t running at the same time as the client. So make sure you’ve got both projects running in separate terminals.

When you open up the browser dev tools (Right click → Inspect), do you see any other messages in the Console tab that might help pinpoint the issue?

1 Like

That makes sense. I will try
It when I get home and will let you know. Thanks!!

1 Like

You were right @MichelleMabuyo ! My server was not running because I had stopped it after I finished doing that part of the tutorial. But after reading your comment, I opened server on the terminal and ran npm start, and then did it on the client folder and now it is working correctly! I learnt something new today! yay! Many thanks!! :heart_eyes:

1 Like