Question

我有一组突变，它们会触发某些类型的弹出窗口的局部状态。他们通常是这样设置的：

  openDialog: (_, variables, { cache }) => {
    const data = {
      popups: {
        ...popups,
        dialog: {
          id: 'dialog',
          __typename: 'Dialog',
          type: variables.type
        }
      }
    };

    cache.writeData({
      data: data
    });
    return null;
  }

我传入的默认值如下：

const defaults = {
  popups: {
    __typename: TYPENAMES.POPUPS,
    id,
    message: null,
    modal: null,
    menu: null,
    dialog: null
  }
};

在我的React代码中使用它们的方式是使用Mutation包装器组件，如下所示：

const OPEN_ALERT_FORM = gql`
  mutation AlertOpenDialog($type: String!) {
    openDialog(type: $type) @client
  }
`;

class Alert extends Component {
  render() {
    return (
      <Mutation mutation={OPEN_ALERT_FORM} variables={{ type: ALERT_FORM }}>
        {openDialog => {
          return (
            <Button
              classes="alert-button"
              onClick={openDialog}
              label="Trigger Alert"
            />
          );
        }}
      </Mutation>
    );
  }
}

对于我的各种弹出窗口（我有3或4个不同的弹出窗口，例如menu和modal），打开和关闭它们的突变看起来都一样，只是类型名称和内容不同。但是，对于对话框，单击它们时会出现此错误：

网络错误：缺少为查询字段对话框返回的Dialog类型对象的选择集

...，然后触发组件从页面中消失。另外，一旦发生这种情况，当您尝试单击其他所有弹出窗口类型时，它们都会消失，然后重新引发该错误，或者说：

未捕获的错误：引发了跨域错误。 React无法访问开发中的实际错误对象。

我尝试重新编写对话框以与其他弹出窗口类型匹配，并且也重新编写了组件，但是我仍然遇到此错误。它似乎确实是对话框+阿波罗特定的。这个问题的根源可能是什么？不可能是后端的东西，因为这只处理本地的Apollo。我以前从未见过此错误，也不确定从这里去哪里。

Answer 1

具有相同的问题错误消息。到目前为止，似乎这是stackoverflow中唯一的问题，其中包含相同的错误消息。

我只会记下我的事情

就我而言，我有一个查询，它不查询对象的字段。厌倦了这种情况，我的查询看起来像这样

{
  popups @client {
    id
    dialog
  }
}

应该是

{
  popups @client {
    id
    dialog {
      id
    }
  }
}

Answer 2

对实际问题的答案似乎在于查询。最初，Apollo客户端未验证@client查询/突变的类型，因此您的突变看上去就像您在问题中写的一样：

mutation AlertOpenDialog($type: String!) {
  openDialog(type: $type) @client
}

上面的正确编写方法是指定（选择）您想在响应中获得的所有简单类型（标量）字段。因此，对于@Vic答案，突变应更像是：

mutation AlertOpenDialog($type: String!) {
  openDialog(type: $type) @client {
    dialog {
      id
    }
  }
}

Answer 3

此修复程序通过将dialog字段视为字符串而不是对象来起作用。将函数更改为此可以解决问题，并消除错误：

  openDialog: (_, variables, { cache }) => {
    const data = {
      popups: {
        ...popups,
        dialog: variables.type
      }
    };

    cache.writeData({
      data: data
    });
    return null;
  }

缺少对象GraphQL + Apollo错误的选择集

3 个答案: