Reactjs TypeError:this.props.mutate不是函数

我正在尝试使用this.props.mutate添加一个用户，但是我收到了这个错误

TypeError: this.props.mutate is not a function

我将解析器设置为可以调用createUser的方式。然而，我不确定我做错了什么

我该怎么做才能让react呼叫阿波罗用户

提前谢谢

server/resolvers.js

export default {
    User: {
      posts: (parent, args, context, info) => parent.getPosts()
    },
    Post: {
      user: (parent, args, context, info) => parent.getUser()
    },
    Query: {
      posts: (parent, args, { db }, info) => db.Post.findAll(),
      users: (parent, args, { db }, info) => db.User.findAll(),
      post: (parent, { id }, { db }, info) => db.Post.findByPk(id),
      user: (parent, { id }, { db }, info) => db.User.findByPk(id)
    },
    Mutation: {
      createUser:(parent, {username, email, password}, {db} , info) => 
        db.User.create({
          username: username, 
          email: email,
          password: password
        })

    }

  };

export default `
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
    posts: [Post!]!
  }
  type Post {
    id: Int!
    title: String
    content: String!
    userId: Int!
    user: User!
  }
  type Query {
    posts: [Post!]!
    post(id: Int!): Post
    user(id: Int!): User
    users: [User!]!
  }
  type Mutation {
    createPost(title: String, content:String!): Post!
    createUser(username: String!, email: String!, password: String!): User!

  }
`;

import React, {Component} from 'react';
import logo from './logo.svg';
import { Mutation } from "react-apollo";
import './App.css';
import { graphql } from 'react-apollo';
import { getUsersQuery,createUserQuery} from './queries/queries'
class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      users: [],
      username: '',
      password: '',
      email: ''
    }
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  addUser = (e) => {
    e.preventDefault()
    this.props.mutate({ 
      variables: { 
        username: this.state.username, 
        password: this.state.password,
        email:this.state.email
      }
    })
  }
  componentDidUpdate(nextProps){
    if(nextProps.data.users !== this.props.data.users){
      this.setState({
        users: this.props.data.users
      })
    }
  }
  render(){
    return(
      <div>
        owl
          <form onSubmit ={this.addUser}>
            <input onChange={this.handleChange} type ="text" name="username" value ={this.state.username} placeholder="Enter Username"/>
            <input onChange={this.handleChange} type ="text" name="password" value ={this.state.password} placeholder="Enter Password"/>
            <input onChange={this.handleChange} type ="text" name="email" value ={this.state.email} placeholder="Enter Email"/>
            <button type="submit">Submit</button>
          </form>
          {this.state.users.map( (user, i) => (
            <div key={i}>
              <h1>{user.username}</h1>
          </div>
        ))}
      </div>
    )
  }
}
export default graphql(getUsersQuery, createUserQuery) (App);

server/schema.js

export default {
    User: {
      posts: (parent, args, context, info) => parent.getPosts()
    },
    Post: {
      user: (parent, args, context, info) => parent.getUser()
    },
    Query: {
      posts: (parent, args, { db }, info) => db.Post.findAll(),
      users: (parent, args, { db }, info) => db.User.findAll(),
      post: (parent, { id }, { db }, info) => db.Post.findByPk(id),
      user: (parent, { id }, { db }, info) => db.User.findByPk(id)
    },
    Mutation: {
      createUser:(parent, {username, email, password}, {db} , info) => 
        db.User.create({
          username: username, 
          email: email,
          password: password
        })

    }

  };

export default `
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
    posts: [Post!]!
  }
  type Post {
    id: Int!
    title: String
    content: String!
    userId: Int!
    user: User!
  }
  type Query {
    posts: [Post!]!
    post(id: Int!): Post
    user(id: Int!): User
    users: [User!]!
  }
  type Mutation {
    createPost(title: String, content:String!): Post!
    createUser(username: String!, email: String!, password: String!): User!

  }
`;

import React, {Component} from 'react';
import logo from './logo.svg';
import { Mutation } from "react-apollo";
import './App.css';
import { graphql } from 'react-apollo';
import { getUsersQuery,createUserQuery} from './queries/queries'
class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      users: [],
      username: '',
      password: '',
      email: ''
    }
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  addUser = (e) => {
    e.preventDefault()
    this.props.mutate({ 
      variables: { 
        username: this.state.username, 
        password: this.state.password,
        email:this.state.email
      }
    })
  }
  componentDidUpdate(nextProps){
    if(nextProps.data.users !== this.props.data.users){
      this.setState({
        users: this.props.data.users
      })
    }
  }
  render(){
    return(
      <div>
        owl
          <form onSubmit ={this.addUser}>
            <input onChange={this.handleChange} type ="text" name="username" value ={this.state.username} placeholder="Enter Username"/>
            <input onChange={this.handleChange} type ="text" name="password" value ={this.state.password} placeholder="Enter Password"/>
            <input onChange={this.handleChange} type ="text" name="email" value ={this.state.email} placeholder="Enter Email"/>
            <button type="submit">Submit</button>
          </form>
          {this.state.users.map( (user, i) => (
            <div key={i}>
              <h1>{user.username}</h1>
          </div>
        ))}
      </div>
    )
  }
}
export default graphql(getUsersQuery, createUserQuery) (App);

客户端解析程序

import { gql } from 'apollo-boost';
const getUsersQuery = gql`
{
    users {
      id
      username
      email
      password
  }
}
`;

const createUserQuery = gql`
  mutation createUser($username: String!, $password: String!, $email: String!) {
    createUser(username: $username, password: $password, email:$email) {
      id
      username
      email
      password
    }
  }
`;


export {
  getUsersQuery,
  createUserQuery
}

App.js

export default {
    User: {
      posts: (parent, args, context, info) => parent.getPosts()
    },
    Post: {
      user: (parent, args, context, info) => parent.getUser()
    },
    Query: {
      posts: (parent, args, { db }, info) => db.Post.findAll(),
      users: (parent, args, { db }, info) => db.User.findAll(),
      post: (parent, { id }, { db }, info) => db.Post.findByPk(id),
      user: (parent, { id }, { db }, info) => db.User.findByPk(id)
    },
    Mutation: {
      createUser:(parent, {username, email, password}, {db} , info) => 
        db.User.create({
          username: username, 
          email: email,
          password: password
        })

    }

  };

export default `
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
    posts: [Post!]!
  }
  type Post {
    id: Int!
    title: String
    content: String!
    userId: Int!
    user: User!
  }
  type Query {
    posts: [Post!]!
    post(id: Int!): Post
    user(id: Int!): User
    users: [User!]!
  }
  type Mutation {
    createPost(title: String, content:String!): Post!
    createUser(username: String!, email: String!, password: String!): User!

  }
`;

import React, {Component} from 'react';
import logo from './logo.svg';
import { Mutation } from "react-apollo";
import './App.css';
import { graphql } from 'react-apollo';
import { getUsersQuery,createUserQuery} from './queries/queries'
class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      users: [],
      username: '',
      password: '',
      email: ''
    }
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  addUser = (e) => {
    e.preventDefault()
    this.props.mutate({ 
      variables: { 
        username: this.state.username, 
        password: this.state.password,
        email:this.state.email
      }
    })
  }
  componentDidUpdate(nextProps){
    if(nextProps.data.users !== this.props.data.users){
      this.setState({
        users: this.props.data.users
      })
    }
  }
  render(){
    return(
      <div>
        owl
          <form onSubmit ={this.addUser}>
            <input onChange={this.handleChange} type ="text" name="username" value ={this.state.username} placeholder="Enter Username"/>
            <input onChange={this.handleChange} type ="text" name="password" value ={this.state.password} placeholder="Enter Password"/>
            <input onChange={this.handleChange} type ="text" name="email" value ={this.state.email} placeholder="Enter Email"/>
            <button type="submit">Submit</button>
          </form>
          {this.state.users.map( (user, i) => (
            <div key={i}>
              <h1>{user.username}</h1>
          </div>
        ))}
      </div>
    )
  }
}
export default graphql(getUsersQuery, createUserQuery) (App);

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
从“反应阿波罗”中导入{突变}；
导入“/App.css”；
从'react apollo'导入{graphql}；
从“./querys/querys”导入{getUsersQuery，createUserQuery}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[]，
用户名：“”，
密码：“”，
电子邮件：“”
}
}
handleChange=（e）=>{
e、 预防默认值（）；
这是我的国家({
[e.target.name]：e.target.value
})
}
addUser=（e）=>{
e、 预防默认值（）
这个.props.mutate（{
变量：{
用户名：this.state.username，
密码：this.state.password，
电子邮件：this.state.email
}
})
}
组件更新（下一步）{
if（nextrops.data.users！==this.props.data.users）{
这是我的国家({
用户：this.props.data.users
})
}
}
render（）{
返回(
猫头鹰
提交
{this.state.users.map（（user，i）=>(
{user.username}
))}
)
}
}
导出默认图形ql（getUsersQuery，createUserQuery）（App）；

graphql仅将单个查询或变异文档作为参数。不清楚为什么要将两个不同的HOC传递给同一个HOC。感谢您的响应，那么我将如何在react端添加createUser变体？每个查询/变体使用一个HOC。如图所示，您可以使用“组合”组合它们。不过，一般来说，放弃hoc而使用新的hooks API.ok似乎更容易。我可以看到变异函数。安抚它。