我需要帮助来理解 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
inputFields
:定义突变的输入结构,其中输入字段将用输入值包装
outputFields
: 定义了变异完成后字段的输出结构,我们可以查看和读取
mutateAndGetPayload
:这个函数是中继突变的核心函数,它执行突变逻辑(例如数据库操作)并将return 暴露给payload突变的输出字段。
mutateAndGetPayload
使用突变从输入字段映射到输出字段
手术。它接收的第一个参数是输入参数列表,我们可以读取它来执行变异操作
我们 return 来自 mutateAndGetPayload
的对象可以在输出字段中访问
resolve()
作为第一个参数。
getFatQuery()
是我们使用 GraphQL 片段表示所有内容的地方
在我们的数据模型中,可能会因这种突变而发生变化
这是中继官方文档中的代码,这是用于 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
inputFields
:定义突变的输入结构,其中输入字段将用输入值包装outputFields
: 定义了变异完成后字段的输出结构,我们可以查看和读取mutateAndGetPayload
:这个函数是中继突变的核心函数,它执行突变逻辑(例如数据库操作)并将return 暴露给payload突变的输出字段。
mutateAndGetPayload
使用突变从输入字段映射到输出字段
手术。它接收的第一个参数是输入参数列表,我们可以读取它来执行变异操作
我们 return 来自 mutateAndGetPayload
的对象可以在输出字段中访问
resolve()
作为第一个参数。
getFatQuery()
是我们使用 GraphQL 片段表示所有内容的地方
在我们的数据模型中,可能会因这种突变而发生变化