响应不成功:在新的 ApolloError 处收到状态代码 400

问题描述 投票:0回答:1

我正在开发一个具有后端 NestJS 和 graphql 和 postgres 的应用程序。前端位于 Next JS 中。从前端调用突变时遇到错误。

只有一个突变通过代码起作用(在最后查找)。

相关代码详情如下:

--- Graphql 查询定义 --- 前端代码:

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

--- 处理提交函数---

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"))
  }

前端配置:

"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: "http://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--- 后端代码:

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

后端代码: ---从模式文件复制的突变---

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

---输入类型密码---

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

---旋转变压器功能---

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

--- 邮递员请求和响应 ---

-- 唯一可用的 API --

const SEND_OTP_MUTATION = gql`
    mutation SendOTP($email: String!) {
      sendOTP(email: $email)
    }
  `;
next.js graphql nestjs apollo apollo-server
1个回答
0
投票

当我实际使用电子邮件作为用户名时,似乎意外添加了用户名字段。使用以下代码找到了它:

const [savePassword, { loading, error, data }] = useMutation(SAVE_PASSWORD_MUTATION);
  // Log the GraphQL query
  console.log("GraphQL Query:", SAVE_PASSWORD_MUTATION?.loc?.source?.body);

这让我运行了我的突变,并将其粘贴到 GraphQL Playground 上。它向我显示了我的错误,我的实体中没有用户名作为字段

© www.soinside.com 2019 - 2024. All rights reserved.