Question

我创造了这个代表我当前案例的要点。基本上我有一个带有细节的对象，在这个细节中我有一个从列表中选择的项目。我有不同类型的列表。选择也与用户有关系。

所以我调用一个变异来改变所选项目，突变按预期工作，但我的用户界面仍然过时。

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

在检查代码并调试突变并更新中继中的代码之后，我发现了我的变异结果中的错误。我正在返回错误的＆＃39; selectItem＆＃39;。

我更新了我的mutation.js，它现在正常工作。

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

中继突变不会更新我的UI

1 个答案: