我需要帮助了解 Relay OutputFields、getFatQuery

Question

这是来自relay官方文档的代码，用于GraphQLAddTodoMutation

const GraphQLAddTodoMutation = mutationWithClientMutationId({
  name: 'AddTodo',
  inputFields: {
    text: { type: new GraphQLNonNull(GraphQLString) },
  },
  outputFields: {
    todoEdge: {
      type: GraphQLTodoEdge,
      resolve: ({localTodoId}) => {
        const todo = getTodo(localTodoId);
        return {
          cursor: cursorForObjectInConnection(getTodos(), todo),
          node: todo,
        };
      },
    },
    viewer: {
      type: GraphQLUser,
      resolve: () => getViewer(),
    },
  },
  mutateAndGetPayload: ({text}) => {
    const localTodoId = addTodo(text);
    return {localTodoId};
  },
});

我认为 mutateAndGetPayload 先执行然后 outputFields？因为它使用 localTodoId 对象作为参数，所以我看到从 mutateAndGetPayload 返回的 localTodoId 对象。

这是中继突变的代码。请查看getFatQuery

export default class AddTodoMutation extends Relay.Mutation {
  static fragments = {
    viewer: () => Relay.QL`
      fragment on User {
        id,
        totalCount,
      }
    `,
  };
  getMutation() {
    return Relay.QL`mutation{addTodo}`;
  }
  getFatQuery() {
    return Relay.QL`
      fragment on AddTodoPayload @relay(pattern: true) {
        todoEdge,
        viewer {
          todos,
          totalCount,
        },
      }
    `;
  }
  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'viewer',
      parentID: this.props.viewer.id,
      connectionName: 'todos',
      edgeName: 'todoEdge',
      rangeBehaviors: ({status}) => {
        if (status === 'completed') {
          return 'ignore';
        } else {
          return 'append';
        }
      },
    }];
  }
  getVariables() {
    return {
      text: this.props.text,
    };
  }
  getOptimisticResponse() {
    return {
      // FIXME: totalCount gets updated optimistically, but this edge does not
      // get added until the server responds
      todoEdge: {
        node: {
          complete: false,
          text: this.props.text,
        },
      },
      viewer: {
        id: this.props.viewer.id,
        totalCount: this.props.viewer.totalCount + 1,
      },
    };
  }
}

我认为 todoEdge 来自 GraphQL 的 outputFields？我在上面看到一个查看器查询，为什么它需要查询查看器？如何创建 getFatQuery？如果有人帮助我更多地了解这一点以及关于 Relay 突变，我将不胜感激。

Answer 1

mutateAndGetPayload 执行然后将payload 返回到 outputFields

mutationWithClientMutationId

Source-Code

starWarsSchema example

---

mutationWithClientMutationId

• inputFields：定义突变的输入结构，其中输入字段将用输入值包装

• outputFields：定义了变异完成后字段的输出结构，我们可以查看和读取

• mutateAndGetPayload：此函数是中继突变的核心，它执行突变逻辑（例如数据库操作）并将有效负载返回到突变的输出字段。

mutateAndGetPayload 使用突变从输入字段映射到输出字段 手术。它接收的第一个参数是输入参数列表，我们可以读取它来执行突变操作

我们从mutateAndGetPayload 返回的对象可以在输出字段中访问 resolve() 作为第一个参数。

---

getFatQuery() 是我们使用 GraphQL 片段表示所有内容的地方 在我们的数据模型中，可能会因这种突变而改变