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传递给Mutation

您需要在此处插入子项：

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

根据Mutation的期望，孩子可以是JSX元素，文本或其他内容。根据文档，Mutation使用renderProp pattern。因此，您应该向它传递一个返回一些JSX的函数。 Here is a good example in the doc

Answer 2

如错误所示，Mutation组件期望传递一个children道具，但您未提供该道具。 Query和Mutation组件都使用render props模式，这意味着您提供的children实际上应该是一个返回该组件以进行渲染的函数。

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

有关渲染prop函数的签名的详细信息，请参见here，但从广义上讲，它已将mutate函数作为其第一个参数，然后将results传递给了它。对象作为第二个参数。 mutate函数就是您用来触发突变的函数。

不同于Query组件，它将在挂载时运行传递给您的查询，而Mutation组件将在调用mutate之前不运行关联的GraphQL查询。这是有意的，因为大多数变异通常不需要进行某种用户操作就可以发生。

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

道具类型失败：道具“孩子”在“静音”中被标记为必填项，但其值为“未定义”

2 个答案: