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

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

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

1 Like
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?

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

1 Like
10

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