# Unhandled Rejection (Error): Response not successful: Received status code 400 new ApolloError

**URL:** <https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371>\
**Category:** Client SDKs\
**Tags:** client, server\
**Created:** [April 11, 2024, 12:13pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371 "2024-04-11T12:13:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ducviet\_0905](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ducviet_0905/32/5012_2.png) [@ducviet\_0905](https://community.apollographql.com/u/ducviet_0905)\
**Post date:** [April 11, 2024, 12:13pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/1 "2024-04-11T12:13:30Z")

</div>

I have this error when i use client side with this code it will get product details but some products get data and some can’t get data and receiver this [Unhandled Rejection (Error): Response not successful: Received status code 400 new ApolloError]. My code is down below

```auto
const ProductInfo: any = dynamic(
    () =>
        import(
            "@/app/(main-layout)/product-detail/components/product-info"
        ) as any,
    {
        loading: () => <p>Loading</p>,
        ssr: true
    }
)
const RecommendList: any = dynamic(
    () =>
        import(
            "@/app/(main-layout)/product-detail/components/recomment-product"
        ) as any,
    {
        loading: () => <p>Loading</p>,
        ssr: true
    }
)
const fetchProduct = (prodId: string) =>
    client
        .query({
            query: GET_PRODUCT,
            variables: { prodId },
            context: {
                fetchOptions: {
                    next: { revalidate: 60 * 3 },
                },
            },
        })
        .then((res) => res?.data);

const fetchImage = (prodId: string) =>
    client
        .query({
            query: GET_IMAGE,
            variables: { prodId },
        })
        .then((res) => res?.data);
export async function generateMetadata({ searchParams }: Prop): Promise<Metadata> {
    const meta = await fetchProduct(searchParams._id);
    const image = await fetchImage(searchParams._id)
    const title = meta?.product?.name;
    let desc = meta?.product?.description;
    if (desc.length > 80) desc = desc.substring(0, 80)
    return {
        title: title,
        description: desc,
        openGraph: {
            title: title,
            description: desc,
            images: [image?.images?.[0]?.url]
        }
    }
}
export default function ProductDetails({ searchParams }: Prop) {
    const data = await fetchProduct(searchParams._id)
return(
 <ProductInfo product={data} />
)

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [April 11, 2024, 12:31pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/2 "2024-04-11T12:31:02Z")

</div>

I’m missing a bit of context here - is this Next.js with the App directory?

A few thoughts here:

- in Next.js, you generally should never have a global `client` as you seem here, since that would be shared between multiple users, potentially leaking private user data
- in Next.js, “use client” component cannot use `async..await`
- you seem to be `await` without `async` in `ProductDetails`, which is not valid JavaScript
- if you use Next.js with the app directory, please use our [@apollo/experimental-nextjs-app-support](https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support) package

Beyond that, I’d need a bit more description on when exactly you are getting those errors. Generally, a 400 error is an error from your server, so looking at your server logs might give you some information.

---

<div class="post-metadata">

**Author:** ![ducviet\_0905](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ducviet_0905/32/5012_2.png) [@ducviet\_0905](https://community.apollographql.com/u/ducviet_0905)\
**Post date:** [April 11, 2024, 12:38pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/4 "2024-04-11T12:38:03Z")

</div>

Thank you but i don’t ‘use client’ on this component and client i said is my set up from my apollo-client-ss.ts

```auto

import { ApolloClient, InMemoryCache, DefaultOptions } from '@apollo/client';

const defaultOptions: DefaultOptions = {
  watchQuery: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all',
  },
}
export const client = new ApolloClient({
  uri: `${process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT}/graphql`,
  cache: new InMemoryCache(),
  ssrMode: true,
  defaultOptions,
});

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [April 11, 2024, 12:46pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/5 "2024-04-11T12:46:50Z")

</div>

And you are using the Next.js App router?

What do you mean by “when i use client side” if you’re not using `"use client"`?

---

<div class="post-metadata">

**Author:** ![ducviet\_0905](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ducviet_0905/32/5012_2.png) [@ducviet\_0905](https://community.apollographql.com/u/ducviet_0905)\
**Post date:** [April 11, 2024, 12:56pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/6 "2024-04-11T12:56:52Z")

</div>

So sorry, my bad. I use app router and use client i said is it

```auto
export const client = new ApolloClient({
  uri: `${process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT}/graphql`,
  cache: new InMemoryCache(),
  ssrMode: true,
  defaultOptions,
});

```

I use this to get fetch data from server.  
Sorry that my words are confusing for you, English is not my strong point.

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [April 11, 2024, 1:59pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/7 "2024-04-11T13:59:56Z")

</div>

Okay, then I roughly have the picture.

You _should never_ have a global client like this in Next.js. Create a `makeClient` function and use it with [@apollo/experimental-nextjs-app-support](https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support)

Also, what is `NEXT_PUBLIC_GRAPHQL_ENDPOINT` pointing at? Is the server pointing at itself here?

Also, when are you getting that error? During build? On usage?

---

<div class="post-metadata">

**Author:** ![ducviet\_0905](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ducviet_0905/32/5012_2.png) [@ducviet\_0905](https://community.apollographql.com/u/ducviet_0905)\
**Post date:** [April 12, 2024, 6:24am UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/8 "2024-04-12T06:24:33Z")

</div>

I see and I use 2 type of connect which is makeClient that you said and global client because I want to get MetaData to SEO of each product so do you have any suggest to me.

NEXT\_PUBLIC\_GRAPHQL\_ENDPOINT is my config in file .env to my server using sandbox apollo studio and Graphql

On usage, but I think it fixed maybe that I install [@apollo/experimental-nextjs-app-support] lost some thing then I just install it when you said to me.

Thanks you very much

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [April 12, 2024, 8:44am UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/9 "2024-04-12T08:44:14Z")

</div>

Even for `generateMetadata`, I would advise you to create a new unique Apollo Client instance in each invocation - `const client = makeClien()` as the first line of each `generateMetadata` call.

We’ll look into making this better in some way in the future, but we’re a bit bound by Next.js here.

One additional note: `ssrMode` is for legacy React "renderToString` SSR. You don’t need it with Next.js.

So your GraphQL server is a different server than the Next.js server?

Hmm. I’m sorry, but without a lot more context on when and how exactly this error occurs, I kinda fear I won’t be able to help.

But I still highly suggest that you look at your GraphQL server log. The 400 is _returned_ from your GraphQL server, so if anything goes wrong, that’s the first place to look.

---

<div class="post-metadata">

**Author:** ![ducviet\_0905](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ducviet_0905/32/5012_2.png) [@ducviet\_0905](https://community.apollographql.com/u/ducviet_0905)\
**Post date:** [April 12, 2024, 12:00pm UTC](https://community.apollographql.com/t/unhandled-rejection-error-response-not-successful-received-status-code-400-new-apolloerror/7371/10 "2024-04-12T12:00:54Z")

</div>

Thank you to answer my question a lot. Have you a good day!!!