Lift-of v: deploy client app: error in browser "ERROR: Response not successful: Received status code 400"

Help
1

I successfully deployed the client app but my client is not getting returning data. my browser display “ERROR: Response not successful: Received status code 400” but I can query the production server using Apollo explorer. Please help.

2

I have the same issue :roll_eyes:

3

I was able to get around the difficulty by modifying the ApolloServer definition:

const server = new ApolloServer({
    ...
    context,
    introspection: true,
  });

:hugs:

4

thanks for your respond.

but when i applied change i still get another error.

on Apollo studio:

Capture2
Capture2928×314 63.4 KB

5

on client app:

Capture4
Capture4977×251 10.2 KB

6

if entered my server link directly on browser:
Capture3

7

meanwhile, this is the image of the error i was getting before i applied your change:

success with apollo studio:

Capture5
Capture5777×748 125 KB

8

But fail on my client app:

Capture1
Capture1993×224 13 KB

please anticipating your kind assistant.

9

Hi @Damisa_Abdullahi !

Thanks for all the context! From the screenshot you showed of what you’re seeing when you navigate to the server URL, it looks like the app didn’t deploy successfully. That’s why the client is unable to reach it.

Are you using the GitHub integration or the Heroku CLI to deploy the server?

When you view logs from the Heroku dashboard, what error are you seeing?

10

I used GitHub integration. Both the server and client actually build and deployed successfully. if i use Apollo explorer i can query the server and get response (returned data). the client app load the header and footer with logo. but it does not get data from the server. it just display error

11

Ahh I see! Hmm, can you send me your:

  • deployed server URL on Heroku
  • code snippet for initializing Apollo Client

The header and footer logo are good to go, they will always display because they don’t rely on data from the server!

12

thanks for your reply.

server url: http://mygraphqlapp-server.herokuapp.com/

const client = new ApolloClient({

  uri: "https://mygraphqlapp-server.herokuapp.com/",    //change to YOUR own production server

  cache: new InMemoryCache(),
  name: "web",
  version: "1.0",
  
});
13

Thank you! I cloned your client repo and was able to duplicate the issue. Replacing the uri property with a different value (https://server-catstronauts.herokuapp.com/), everything seems to be working! So I’m thinking it has something to do with the deployed version of your server (https://mygraphqlapp-server.herokuapp.com/) not allowing this.

Can you check your Heroku environment variables to make sure you’ve added the correct ones? These are covered in the section “Adding your environment variables” in this lesson: Deploying Apollo Server | Lift-off V: Production & the Schema Registry | Apollo Odyssey

Thanks for your patience @Damisa_Abdullahi

14

@Damisa_Abdullahi - my colleague just reached out to me and pointed out the issue! Our starter code for the client repo had a mistake which was causing this issue.

The starter code repo you cloned for the client uses a field called durationInSeconds in its queries. This change comes up later on in the course (in the Field deprecation lesson) but was mistakenly added to the starter code.

We’ll be merging a PR shortly to address this, but in the meantime you can find all instances of durationInSeconds in the client app and replace it with length. This should fix the issue.

Alternatively, you can keep on going with the course and finish the Field deprecation lesson. Then, try the client app again and it should be working.

Apologies for the confusion, let me know if you have any follow-up questions!

15

thanks for your assistant. I replaced the durationInSeconds with length and it work like charm.

1 Like