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

Client SDKs
,
1

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

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} />
)
2

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 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.

4

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


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,
});
5

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"?

6

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

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.

7

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

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?

8

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

9

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.

10

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