失败的道具类型：道具 children 在 `Mutation` 中被标记为必需，但其值为 `undefined`

Question

我正在尝试使用 Apollo 将一些信息写入 GraphQL/MongoDB 数据库，但突变总是出错。

也许有人可以帮助我:(?

我用 this.addTracker() 调用带有所需参数的函数；在 onComponentDidMount();

    addTracker(trackerModelID, Hash, userId){
    console.log("Typ: " + trackerModelID);
    console.log("Access-Tooken: " + Hash.access_token)

    var access_token = Hash.access_token
    var token_type = Hash.token_type
    var expires_in = Hash.expires_in
    var user_id = Hash.user_id

    const createTrackerMutation = gql`
        mutation CreateTrackerMutation($trackerModelID: ID, $userId: ID, 
       $access_token: String, $token_type: String, $expires_in: Int, $user_id: String)
        {  createTracker (
            trackerModelID: $trackerModelID,
            userId: $userId,
            access_token: $access_token,
            token_type: $token_type,
            expires_in: $expires_in,
            user_id: $user_id
            )
            {
            id
            }
        }
        `
         console.log("jetzt run")   
        return(
          <div>hi
        <Mutation 
            mutation={createTrackerMutation} 
            variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
        </Mutation>
        </div>  
        )
    }

错误信息：警告：失败的道具类型：道具 children 在 Mutation 中被标记为必需，但其值为 undefined。在突变中（在 fitbit.js:97）

Answer 1

错误来自 Mutation.

中的 propTypes 定义

错误说 Mutation 需要 children 作为道具，但没有 children 传递给 Mutation

您需要在此处插入 children：

  <Mutation 
        mutation={createTrackerMutation} 
        variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
     [INSERT_CHILDREN_HERE]
    </Mutation>

Children 可以是 JSX 元素、文本或其他内容，具体取决于 Mutation 的期望。根据文档，Mutation 使用 renderProp pattern。所以你应该给它传递一个 return 一些 JSX 的函数。 Here is a good example in the doc

Answer 2

如错误所示，Mutation 组件需要传递给它的 children 道具，但您没有提供。 Query 和 Mutation 组件都使用 render props 模式，这意味着您提供的 children 实际上应该是 returns 组件要呈现的函数。

<Mutation 
  mutation={createTrackerMutation} 
  variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
  {(mutate, result) => {
    return (
      <div>Your component here.</div>
    )
  }}
</Mutation>

可以找到有关 render prop 函数签名的详细信息 here，但从广义上讲，它传递了一个 mutate 函数作为它的第一个参数，然后，为了方便，一个 results 对象作为第二个参数。 mutate 函数是您用来触发突变的函数。

与 Query 组件不同，它将运行您在挂载时传递给它的任何查询，Mutation 组件不会运行关联的 GraphQL 查询，直到 mutate 被调用。这是有意为之的，因为大多数突变通常不需要发生，直到发生某种用户操作。

如果在安装组件时需要运行突变，则需要在 mutate 中将 Mutation 组件中呈现的组件作为 prop 传递。然后该组件可以在其 componentDidMount 方法中调用 mutate。之前有人问过这个问题，可以找到更详细的答案。

失败的道具类型：道具 children 在 `Mutation` 中被标记为必需，但其值为 `undefined`

Failed prop type: The prop `children` is marked as required in `Mutation`, but its value is `undefined`

apollo

reactjs

graphql

react-apollo