时间戳

首页 > 解决方案 > GraphQL（Prisma）突变数据未定义

reactjs - GraphQL（Prisma）突变数据未定义

问题描述

我正在尝试进行突变，但我不断收到有关 React 端数据为空的错误。但是，如果我在 GraphQL 控制台中尝试相同的突变，它就会起作用。另外，我知道端点正在工作，因为我可以毫无问题地查询数据。

一切

服务器代码（解析器）：

 async signup(parent, args, ctx, info) {
    // lowercase their email
    args.email = args.email.toLowerCase();
    // hash their password
    const password = await bcrypt.hash(args.password, 10);
    // create the user in the database
    const user = await ctx.db.mutation.createUser({
        data: { 
          ...args,
          password,
        }
      }, info);
    return user;
}

突变（反应方面）

mutation signupUser($email: String!, $password: String!, $name: String!) {
  signup(email: $email, password: $password, name: $name) {
    __typename
    id
    email
    password
    name
  }
}

TypeError: Cannot read property 'data' of undefined
    at Mutation._this.onMutationCompleted (react-apollo.esm.js:477)
    at react-apollo.esm.js:434

这也是我在组件上的突变片段

<Mutation
        mutation={signUpUserMutation}
        onCompleted={(user) => {
          handleClose();
        }}
        onError={(error) => {
          console.log(error)
          setOpen(true);
        }}
      >
        {signup => (
          <Form
            onSubmit={async (values, { setSubmitting }) => {
              await signup({
                variables: {
                  name: values.name,
                  email: values.email,
                  password: values.password,
                },
              });
              setSubmitting(false);
            }}
          >
            {({
              values, errors, handleChange, handleBlur, isSubmitting,
            }) => (

标签： reactjsgraphqlprisma

解决方案

在您的架构中

type User {
    id: Int
    name: String
    email: String
    password: String
}
type Response {
    status: Boolean
    message: String
    data: User
}
type Mutation {
    signUp(name: String!, email: String!, password: String!) : Response
}

突变解析器注册功能

 async signUp(parent, args, { db }, info) {
    // lowercase their email
    args.email = args.email.toLowerCase();
    // hash their password
    const password = await bcrypt.hash(args.password, 10);
    // create the user in the database
    const data = { 
        ...args, 
        password,
    }
    const user = await db.mutation.createUser(data, info);
    return user;
 }

在数据库突变 createUser 函数中，您可以像这样访问

const createUser = async ({ name, email, password }, info) => {
  try {
      // Code to save user information in database
    return { status: true,
             message: "User registration successful. You can login now.", 
             data: createdUser
    }
  } catch(e) {
    return { status: false, message: e.message, data: null }
  }
}

你的查询

mutation signupUser($email: String!, $password: String!, $name: String!) {
  signup(email: $email, password: $password, name: $name) {
    status
    message
    data {
     id
     email
     password
     name
    }
  }
}

推荐阅读