我正在开发一个具有后端 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)
}
`;
当我实际使用电子邮件作为用户名时,似乎意外添加了用户名字段。使用以下代码找到了它:
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 上。它向我显示了我的错误,我的实体中没有用户名作为字段