中继突变不会更新我的UI

Question

I have created this gist that represents my current case. Basically I have an object with details, in this details I have an item selected from a list. I have different types of list. And the selection has relation with the user too.

So I am calling a mutation in order to change the selected item, The mutations works as expected, but my UI remains outdate.

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
      }
    }
  }
`;

Answer 1

After to check the code and debug the mutation and update code in relay, I found what the error was in my mutation result. I was returning the incorrect 'selectItem'.

I updated my mutation.js and it's working properly right now.

const mutation = graphql`
  mutation UpdateUserObjectSelectionMutation($input: UpdateUserObjectSelectionInput!) {
    updateUserObjectSelection(input: $input) {
      UserObjectSelection {
        id
        SelectItem {
          id
        }
      }
    }
  }
`;