如何使用中继处理服务器端输入验证？

Question

我有以下有效的 GraphQL 操作：

GraphQL 突变：

mutation CreateUserMutation ($input: CreateUserInput!) {
  createUser(input: $input) {
    clientMutationId
    userEdge {
      node {
        email
        username
      }
    },
    validationErrors {
      id
      email
    }
  }
}

GraphQL 突变响应：

{
  "data": {
    "createUser": {
      "clientMutationId": "112",
      "userEdge": {
        "node": {
          "email": "prasath112@example.com",
          "username": "soosap112"
        }
      },
      "validationErrors": {
        "id": "create-user-validation-errors",
        "email": [
          "Email looks not so good."
        ]
      }
    }
  }
}

到目前为止一切顺利，我的 GraphQL 响应的 validationErrors 是键值对的对象，其中 value 始终是输入验证错误消息的数组服务器与特定输入字段相关（即 {'email': ['email is taken', 'email is on blacklist']}）。

下一步（这是我需要帮助的地方）- 如何在 Relay 客户端存储中使用该数据？换句话说，如何才能让我的组件中的 validationErrors 可用 this.props.validationErrors？

CreateUserMutation.js

import Relay from 'react-relay';

export class CreateUserMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`
      mutation {
        createUser
      }
    `;
  }

  getVariables() {
    return {
      email: this.props.email,
      username: this.props.username,
      password: this.props.password,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on CreateUserPayload @relay(pattern: true) {
        userEdge,
        validationErrors,
        viewer { userConnection }
      }
    `;
  }

  getConfigs() {
    return [
      {
        type: 'FIELDS_CHANGE',
        fieldIDs: {
          validationErrors: 'create-user-validation-errors',
        },
      },
      {
        type: 'RANGE_ADD',
        parentName: 'viewer',
        parentID: this.props.viewer.id,
        connectionName: 'userConnection',
        edgeName: 'userEdge',
        rangeBehaviors: {
          // When the ships connection is not under the influence
          // of any call, append the ship to the end of the connection
          '': 'append',
          // Prepend the ship, wherever the connection is sorted by age
          // 'orderby(newest)': 'prepend',
        },
      },
    ];
  }
}

这是我的尝试：首先，我可以使用 getConfigs user edges 到我的 Relay 客户端存储中 [= =17=]。由于我的 validationErrors 对象没有实现连接模型，因此 FIELDS_CHANGE 似乎是我的情况下唯一合理的类型。我正在尝试模拟 Relay 似乎需要使用 'create-user-validation-errors' 作为唯一 ID 来填充客户端存储的 dataID。

这里是我的 React 组件的一个片段，使示例完整。

class App extends React.Component {
  static propTypes = {
    limit: React.PropTypes.number,
    viewer: React.PropTypes.object,
    validationErrors: React.PropTypes.object,
  };

  static defaultProps = {
    limit: 5,
    validationErrors: {
      id: 'create-user-validation-errors',
    },
  };

  handleUserSubmit = (e) => {
    e.preventDefault();

    Relay.Store.commitUpdate(
      new CreateUserMutation({
        email: this.refs.newEmail.value,
        username: this.refs.newUsername.value,
        password: this.refs.newPassword.value,
        viewer: this.props.viewer,
      })
    );
  };

如何使用 Relay 在 React 组件中使用来自 GraphQL 响应的基于非连接模型的信息？最小的工作示例会很棒。
您知道使用 GraphQL 和 Relay 进行服务器端输入验证的更好方法吗？

Answer 1

突变要么成功，要么失败。我通常设计客户端突变的胖查询和配置，牢记成功案例。要处理失败情况，突变的回调函数就足够了。

如何使用 Relay 在 React 组件中使用来自 GraphQL 响应的基于非连接模型的信息？

我知道两种方式。

1) 使用FIELDS_CHANGE type in getConfigs 客户端突变代码的函数： 当我们需要更新中继存储中的数据以响应突变的结果，这通常被使用。代码如下所示：

getFatQuery() {
  return Relay.QL`
    fragment on CreateUserPayload {
      ...
      ...
      viewer { 
        userCount,
      }
    }
  `;
}

getConfigs() {
  return [
    {
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        viewer: this.props.viewer.id,
      },
    },
    ...
    ...
  ];
}

在您的情况下，如果您想将 validationErrors 作为中继存储的一部分进行更新，请将其作为道具传递并让 validationErrors: this.props.validationErrors.id.

2) 使用mutation的回调函数： 当我们只需要一些不应该影响中继存储中的数据的信息时，这是一个不错的选择。代码如下所示：

const mutation = new CreateUserMutation({
  email: this.state.email,
  username: this.state.username,
  password: this.state.password,
  viewer: this.props.viewer,
});
const onSuccess = (response) => {
  // If you have both successful data update and some other extra info, you
  // can have, say `response.warnings`. The server sends `warnings` in the
  // response object.
};
const onFailure = (transaction) => {
  // This is the most appropriate place for dealing with errors.
  var error = transaction.getError();
  // Get the errors!
};
Relay.Store.commitUpdate(mutation, {onSuccess, onFailure});

您知道使用 GraphQL 和 Relay 进行服务器端输入验证的更好方法吗？

GraphQL 和 Relay 支持的基本输入验证目前仅限于使用 GraphQLNonNull 和预期的类型，例如 names: new GraphQLNonNull(GraphQLString)。因此，如果我们为名称传递一个整数，突变将失败并提供适当的错误消息。

对于其他类型的验证，mutateAndGetPayload 服务器端变异中的函数是一个很好的地方，我们可以在其中应用我们自己的逻辑。

Konstantin Tarkus has an excellent article 关于 GraphQL 突变中的输入验证。

如何使用中继处理服务器端输入验证？

How to tackle server-side input validation using Relay?

relayjs

如何使用 Relay 在 React 组件中使用来自 GraphQL 响应的基于非连接模型的信息？

您知道使用 GraphQL 和 Relay 进行服务器端输入验证的更好方法吗？