我创造了这个代表我当前案例的要点。 基本上我有一个带有细节的对象,在这个细节中我有一个从列表中选择的项目。我有不同类型的列表。 选择也与用户有关系。
所以我调用一个变异来改变所选项目,突变按预期工作,但我的用户界面仍然过时。
https://gist.github.com/dobleuber/c74625704c37d7245b747d31b3c433cc
types.graphql
type User @model {
id
userObjectSelection: [UserObjectSelection!]!
}
type Object @model {
id
name
userObjectSelection: [UserObjectSelection!]!
selectionType: SelectionType!
}
type SelectionType @model {
id
items: [SelectItem!]!
objects: [Object!]!
}
type SelectItem @model {
id
name
selectionType: SelectionType!
userObjectSelection: [UserObjectSelection!]!
}
type UserObjectSelection @model {
id
user: User!
object: Object!
selectedItem: selectItem
}
ObjectPage.js
const query = graphql`
query ObjectPageQuery($objectId: ID!, $userObjectSelectionId: ID!) {
object: node(id: $objectId) {
...Object_object
}
selection: node(id: $userObjectSelectionId) {
...Object_selection
}
}
`;
changeSelectedItem (selectionId, itemId) {
mutateSelectedItem(selectionId, itemId, () => console.log('updated'));
}
///
render={({ error, props }) => {
if (error) {
return <div>{error.message}</div>;
} else if (props) {
return (
<div className="object-page">
<Item
object={props.object}
selection={props.selection}
onSelectItem={this.changeSelectedItem}
/>
</div>
);
}
return <div>Loading</div>;
}}
///
Object.js
const Object = ({ object, selection, onSelectItem }) => {
const {id} = object;
return (
<div>
<span>{id}</span>
<div className="item-list">
object.selectionType.items.edges.map(({ node }) => (
<Item
key={node.__id}
item={node}
userObjectSelectionId={selection.id}
onSelectCard={onSelectItem}
selectedItem={selection.item}
/>
))
</div>
</div>);
};
createFragmentContainer(Object, graphql`
fragment Object_story on Object {
details
selectionType {
id
items: {
edges: {
node {
...Item_item
}
}
}
}
}
fragment Object_selection on UserObjectSelection {
id
selectedItem: item {
...Item_selectedCard
}
}
`);
mutation.js
const mutation = graphql`
mutation UpdateUserObjectSelectionMutation($input: UpdateUserObjectSelectionInput!) {
updateUserObjectSelection(input: $input) {
UserObjectSelection {
id
}
SelectItem {
id
}
}
}
`;
答案 0 :(得分:0)
在检查代码并调试突变并更新中继中的代码之后,我发现了我的变异结果中的错误。 我正在返回错误的&#39; selectItem&#39;。
我更新了我的mutation.js,它现在正常工作。
const mutation = graphql`
mutation UpdateUserObjectSelectionMutation($input: UpdateUserObjectSelectionInput!) {
updateUserObjectSelection(input: $input) {
UserObjectSelection {
id
SelectItem {
id
}
}
}
}
`;