Response not successful: Received status code 400 at new ApolloError

Question

I am working on an application with has the backend NestJS with graphql and postgres. Front End is in Next JS. Facing this error while calling a mutation from the front end. Relevant details of the code are below:

— Graphql Query definition —
Front End Code:

const SAVE_PASSWORD_MUTATION = gql`
  mutation SavePassword($passwordInput: Password!, $userId: Float!) {
    savePassword(passwordInput: $passwordInput, userId: $userId) {
      email
      username
      # Other user fields
    }
  }
`;

— handle submit function —

const handleSubmit = async (value: any) => {
    try {
      const response = await savePassword({
        variables: {
          passwordInput: {
            password: "hyperx",
            confirmPassword: "hyperx",
          },
          userId: 2, // Replace with the actual user ID
        },
      });

      console.log('Password saved:', response);
    } catch (error) {
      console.error('Error saving password:', error);
    }
    console.log(value);
    // dispatch(updatePassword(value.password))
    // dispatch(updateFormName("registration"))
  }

Front End Configuration:

"use client";

import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  SuspenseCache,
} from "@apollo/client";
import {
  ApolloNextAppProvider,
  NextSSRApolloClient,
  NextSSRInMemoryCache,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";

function makeClient() {
  const httpLink = new HttpLink({
    // https://studio.apollographql.com/public/splacex-l4uc6p/
    uri: "https://localhost:3006/graphql",
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
          new SSRMultipartLink({
            stripDefer: true,
          }),
          httpLink,
        ])
        : httpLink,
  });
}

// also has a function to create a suspense cache
function makeSuspenseCache() {
  return new SuspenseCache();
}

export default function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient= { makeClient }  >
    { children }
    </ ApolloNextAppProvider>
  );
}

—layout.tsx—
Backend Code:

import './globals.css';
import { Inter } from 'next/font/google';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ReduxProvider from '@/features/Provider';
import ApolloWrapper from '@/lib/apollo-wrapper';
const inter = Inter({
  weight: ["200", "400", "500"],
  subsets: ['latin'],
});

export const metadata = {
  title: 'Customer Portal',
  description: 'Generated by create next app',
};



export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const navAndFotterHidingRoute = ["/dashboard"];


  return (
    // <Provider store={store}>
    <html lang="en">
      <body className={inter.className}>
        <ReduxProvider>
          <Navbar navAndFotterHidingRoute={navAndFotterHidingRoute} />
          <ApolloWrapper>
            {children}
          </ApolloWrapper>
        </ReduxProvider>

        <Footer navAndFotterHidingRoute={navAndFotterHidingRoute} />
      </body>
    </html>
    // </Provider>
  );
}

Backend Code:
—Mutation copied from schema file—

savePassword(passwordInput: Password!, userId: Float!): User!

—Input type Password—

input Password {
  password: String!
  confirmPassword: String!
}

—Resolver Function—

@Mutation(() => User)
  async savePassword(
    @Args('passwordInput') passwordInput: Password,
    @Args('userId') userId: number,
  ): Promise<User> {
    console.log(passwordInput, userId)
    return this.userService.savePassword(passwordInput, userId);
  }

Response not successful: Received status code 400 at new ApolloError

Response not successful: Received status code 400 at new ApolloError

0

Leave a Reply Cancel reply