400 Bad request error happening in createHttpLink

[apensia914]

I am Using Apollo Client with React and trying to fetch the data.

Here's my Query that I made for seeProduct with using graphql-nexus

// See Product Query
export const SeeProductQuery = queryField("seeProduct", {
  type: "Product",
  description: "See Product Query",
  args: {
    id: nonNull(stringArg()),
  },
  resolve: (_, { id }, {}) => {
    return client.product.findUnique({ where: { id } });
  },
});

and below is my Home() component.

const SEE_PRODUCT_QUERY = gql`
  query ($seeProductId: String!) {
    seeProduct(id: $seeProductId) {
      name
      price
    }
  }
`;

export default function Home() {
  const { data } = useQuery(SEE_PRODUCT_QUERY);
  return (
    <>
      <PageTitle title="Home" />
      <Container></Container>
    </>
  );

And my setting for Apollo with React

const httpLink = createHttpLink({
  uri: "http://localhost:4500/graphql",
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("authorization");
  return {
    headers: {
      ...headers,
      authorization: token,
    },
  };
});

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: authLink.concat(httpLink),
});

But I am getting the following error in the console.

POST http://localhost:4500/graphql 400 (Bad Request)
(anonymous) @ createHttpLink.ts:156
Subscription @ module.js:190
subscribe @ module.js:264
(anonymous) @ index.ts:22
Promise.then (async)
(anonymous) @ index.ts:17
Subscription @ module.js:190
subscribe @ module.js:264
complete @ Concast.ts:210
Concast.start @ Concast.ts:103
Concast @ Concast.ts:83
QueryManager.getObservableFromLink @ QueryManager.ts:978
QueryManager.getResultsFromLink @ QueryManager.ts:1037
resultsFromLink @ QueryManager.ts:1382
QueryManager.fetchQueryByPolicy @ QueryManager.ts:1412
fromVariables @ QueryManager.ts:1120
QueryManager.fetchQueryObservable @ QueryManager.ts:1141
ObservableQuery.fetch @ ObservableQuery.ts:591
ObservableQuery.reobserve @ ObservableQuery.ts:720
(anonymous) @ ObservableQuery.ts:136
Subscription @ module.js:190
subscribe @ module.js:264
(anonymous) @ useQuery.ts:155
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

It says error is deriving from the createHttpLink.ts:156.

I am using Graphql version of ^16.3.0 and @apollo/client ^3.5.9. Any ideas?

[dylanwulf]

"400 Bad Request" comes from the server, not the client.

[wyork63]

Any updates on this issue? Experiencing something similar.

[daydy2]

"400 Bad Request" comes from the server, not the client.

400 Bad Request is a client-side error message.

[jpvajda]

Thanks for sharing this issue!

A few thoughts:

1. Could you try upgrading to the most current version of our client? v 3.6.8?
2. As @dylanwulf mentioned, the 400 seems to be pointing to an issue with the request being made to your server. I noticed you have the uri set to uri: "http://localhost:4500/graphql" So i'd double check if that is actually running or if you server configuration is perhaps not probable set up to work with the Apollo Client.
3. Here are the docs on http link
4. I also found a sample application here with Nexus + Apollo, maybe that will help you track down the issue.

[Viistorrr]

Same issue, did somebody fixed? I really need it.

[ChampiMagic]

I had the same problem, the thing was a syntax error in my Types in my client (I use fragments) so all my calls (queries and mutations) were wrong. I hope it helps you

[BasudevBharatBhushan]

I had the same problem, the thing was a syntax error in my Types in my client (I use fragments) so all my calls (queries and mutations) were wrong. I hope it helps you

Can you please elaborate, on how you resolved your issue?

[ChampiMagic]

I had the same problem, the thing was a syntax error in my Types in my client (I use fragments) so all my calls (queries and mutations) were wrong. I hope it helps you

Can you please elaborate, on how you resolved your issue?

Yes. This is my code:

My Fragment: MyQuery:

As you can see, I use my Fragment in all my Person type queries. My problem was that in the structure of my Fragment the "adress" property was misspelled.

I hope I have solved your doubt.

[MincePie]

Did anyone figure out how to look for problems that cause this issue? I can run a query in my local host, and in the apollo chrome inspector, but I cant run the mutation to create an object - the only error message is 'bad request' and similar blob as posted above. The network tab shows the error initiator as the createHttpLink. Where do I look for what the problem could be?

[bignimbus]

Hi all - thanks for the conversation here. Because server responses with non-2xx status codes may contain payloads that do not conform to the GraphQL specification, your UI will have to define how to handle those payloads. This can be done in Apollo Client via Error Link. Hope that helps!