Javascript 执行更新用户时出现问题

我有一个设置页面，用户可以在其中更新他们的电子邮件、名字和姓氏。我正在用一个用户组件包装整个设置组件，该组件包含用户的所有数据道具。数据被拉入并在输入字段中显示得很好，但当我从设置组件提交数据时，出现以下错误：

[GraphQL error]: Message: You provided an invalid argument for the where selector on User., Location: , Path: updateUser

Uncaught (in promise) Error: GraphQL error: You provided an invalid argument for the where selector on User.

schema.graphql

...
# import * from './generated/prisma-client/prisma.graphql'

updateUser(email: String, firstName: String, lastName: String, password: String): User!
...

Mutation.js

async updateUser(parent, args, ctx, info) {
    // First check if there is a user with that email
    const user = await ctx.db.query.user({ where: { email: args.email } });
    if (user) {
      throw new Error(`The email ${args.email} is already being used`);
    }
    const updatedUser = await ctx.db.mutation.updateUser({
      where: { id: args.id },
      data: {
        email: args.email,
        firstName: args.firstName,
        lastName: args.lastName
      }
    });
    return updatedUser;
  }

前端突变：

const UPDATE_USER_MUTATION = gql`
  mutation UPDATE_USER_MUTATION(
    $email: String!
    $firstName: String!
    $lastName: String!
  ) {
    updateUser(email: $email, firstName: $firstName, lastName: $lastName) {
      id
      email
      firstName
      lastName
    }
  }
`;

如果有帮助，我还可以提供完整的Settings.js组件。我仍在学习GraphQL/Apollo，所以我确信我犯了一个明显的错误，但找不到位置。任何帮助都将不胜感激！谢谢

编辑：添加Settings.js文件：

import React from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import styled, { keyframes } from "styled-components";
import { Mutation, Query } from "react-apollo";
import { Button, Flex, Card, Box } from "rebass";
import gql from "graphql-tag";
import Link from "./Link";
import Text from "./Text";
import Error from "./ErrorMessage";
import User, { CURRENT_USER_QUERY } from "./User";

const UPDATE_USER_MUTATION = gql`
  mutation UPDATE_USER_MUTATION(
    $id: ID!
    $email: String
    $firstName: String
    $lastName: String
  ) {
    updateUser(
      id: $id
      email: $email
      firstName: $firstName
      lastName: $lastName
    ) {
      id
      email
      firstName
      lastName
    }
  }
`;

const StyledInput = styled(Box).attrs({
  as: "input",
})`
  font-size: 1em;
  border-radius: 3px;
  width: 15em;
  border: 1px solid ${props => props.theme.colors.greys[1]};
  padding: 0.5em;
`;

const UpdateSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address")
    .required("You must enter an email address"),
});

const Settings = props => (
  <User>
    {({ data: { currentUser } }) => (
      <Mutation
        mutation={UPDATE_USER_MUTATION}
        refetchQueries={[{ query: CURRENT_USER_QUERY }]}

      >
        {(updateUser, { error, loading, called }) => (
          <Formik
            initialValues={{
              id: props.userId,
              email: currentUser.email,
              firstName: currentUser.firstName,
              lastName: currentUser.lastName,
            }}
            validationSchema={UpdateSchema}
            onSubmit={values => {
              updateUser({
                variables: {
                  email: values.email,
                  firstName: values.firstName,
                  lastName: values.lastName,
                },
              });
            }}
            render={({
              values,
              errors,
              touched,
              handleChange,
              handleBlur,
              handleSubmit,
            }) => (
              <Flex
                flexDirection={["column"]}
                mb={[2, 0]}
                width={1}
                alignItems="center"
                height={1}
              >
                <form onSubmit={handleSubmit} method="post">
                  <fieldset disabled={loading} aria-busy={loading}>
                    <Box>
                      <Error error={error} />
                      <Box mb="30px">
                        <label htmlFor="email">
                          <Text my={2}>Email</Text>
                          <StyledInput
                            placeholder="Enter your email address"
                            type="email"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              Email successfully updated!
                            </Text>
                          )}

                          {touched.email && errors && errors.email && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.email}
                            </Text>
                          )}
                        </label>
                      </Box>

                      <Box mb="30px">
                        <label htmlFor="First Name">
                          <Text my={2}>First Name</Text>
                          <StyledInput
                            placeholder="Please enter your first name"
                            type="text"
                            name="firstName"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.firstName}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              First name updated!
                            </Text>
                          )}

                          {touched.firstName && errors && errors.firstName && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.firstName}
                            </Text>
                          )}
                        </label>
                      </Box>

                      <Box mb="30px">
                        <label htmlFor="Last Name">
                          <Text my={2}>Last Name</Text>
                          <StyledInput
                            placeholder="Please enter your last name"
                            type="text"
                            name="lastName"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.lastName}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              Last name updated!
                            </Text>
                          )}

                          {touched.lastName && errors && errors.lastName && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.lastName}
                            </Text>
                          )}
                        </label>
                      </Box>
                      <Box>
                        <Button type="submit" width={1} primary>
                          Update
                        </Button>
                      </Box>
                    </Box>
                  </fieldset>
                </form>
              </Flex>
            )}
          />
        )}
      </Mutation>
    )}
  </User>
);

export default Settings;
export { UPDATE_USER_MUTATION };

从“React”导入React；
从“Formik”导入{Formik}；
从“Yup”导入*作为Yup；
从“样式化组件”导入样式化的{关键帧}；
从“react apollo”导入{Mutation，Query}；
从“rebass”导入{按钮、Flex、卡、盒}；
从“graphql标签”导入gql；
从“/Link”导入链接；
从“/Text”导入文本；
从“/ErrorMessage”导入错误；
从“/User”导入用户“{CURRENT_User_QUERY}”；
常量更新用户变异=gql`
变异更新\用户\变异(
$id:id！
$email:String
$firstName:String
$lastName:String
) {
更新程序(
id:$id
电子邮件：$email
名字：$firstName
lastName:$lastName
) {
身份证件
电子邮件
名字
姓氏
}
}
`;
常量StyledInput=styled（Box）.attrs({
作为：“输入”，
})`
字号：1em；
边界半径：3px；
宽度：15em；
边框：1px solid${props=>props.theme.colors.greys[1]}；
填充：0.5em；
`;
const UpdateSchema=Yup.object（）.shape({
电子邮件：Yup.string（）
.电子邮件（“无效电子邮件地址”）
。必填（“您必须输入电子邮件地址”），
});
常量设置=道具=>(
{（{数据：{currentUser}}}）=>(
{（updateUser，{错误，加载，调用}）=>(
{
更新程序({
变量：{
电子邮件：values.email，
firstName:values.firstName，
lastName:values.lastName，
},
});
}}
渲染={({
价值观
错误，
感动的，
handleChange，
车把，
手推，
}) => (
电子邮件
{！错误&&！加载&&调用&&&(
电子邮件已成功更新！
)}
{touch.email&&errors&&errors.email&&(
{errors.email}
)}
名字
{！错误&&！加载&&调用&&&(
名字更新了！
)}
{touch.firstName&&errors&&errors.firstName&&(
{errors.firstName}
)}
姓
{！错误&&！加载&&调用&&&(
姓氏更新！
)}
{touch.lastName&&errors&&errors.lastName&&(
{errors.lastName}
)}
使现代化
)}
/>
)}
)}
);
导出默认设置；
导出{更新用户}；

您没有在前端中提供id，因此后端接收null并引发此异常

请在前端提供

const UPDATE\u USER\u MUTATION=gql`
变异更新\用户\变异(
$id:id！
$email:String！
$firstName:String！
$lastName:String！
) {
updateUser（id:$id，email:$email，firstName:$firstName，lastName:$lastName）{
身份证件
电子邮件
名字
姓氏
}
}
`;

编辑：同时更新

schema.graphql

文件

...
# import * from './generated/prisma-client/prisma.graphql'

updateUser(id: ID!, email: String, firstName: String, lastName: String, password: String): User!
...

编辑：同时更新react组件，如下所示：

从“React”导入React；
从“Formik”导入{Formik}；
从“Yup”导入*作为Yup；
从“样式化组件”导入样式化的{关键帧}；
从“react apollo”导入{Mutation，Query}；
从“rebass”导入{按钮、Flex、卡、盒}；
从“graphql标签”导入gql；
从“/Link”导入链接；
从“/Text”导入文本；
从“/ErrorMessage”导入错误；
从“/User”导入用户“{CURRENT_User_QUERY}”；
常量更新用户变异=gql`
变异更新\用户\变异(
$id:id！
$email:String
$firstName:String
$lastName:String
) {
更新程序(
id:$id
电子邮件：$email
名字：$firstName
lastName:$lastName
) {
身份证件
电子邮件
名字
姓氏
}
}
`;
康斯特街