我需要帮助来理解 Relay OutputFields、getFatQuery

I need help understanding Relay OutputFields, getFatQuery

这是中继官方文档中的代码,这是用于 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 对象。

这是中继的代码 mutation.please 看看 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 突变,我将不胜感激。

mutateAndGetPayload 执行然后 returns payload 到 outputFields

mutationWithClientMutationId

Source-Code

starWarsSchema example


mutationWithClientMutationId

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

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

  • mutateAndGetPayload:这个函数是中继突变的核心函数,它执行突变逻辑(例如数据库操作)并将return 暴露给payload突变的输出字段。

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

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


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