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

2024-06-23

我有一组突变可以触发某些类型弹出窗口的本地状态。它们一般是这样设置的:

  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 and modal),打开和关闭它们的突变看起来都一样,只是类型名称和内容等不同。但是,对于对话框,当我单击它们时,我会收到此错误:

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

...然后触发组件从页面上消失。另外,一旦发生这种情况,当您尝试单击所有其他弹出窗口类型时,它们就会消失,并且要么重新抛出该错误,要么说:

未捕获的错误:抛出了跨源错误。 React 无法访问开发中的实际错误对象。

我尝试重写对话框以与其他弹出类型匹配,并重写组件,但我仍然收到此错误。它似乎是特定于dialog+Apollo 的。 这个问题的根源可能是什么?它不可能是后端的东西,因为这只是与本地 Apollo 打交道。我以前没有见过这个错误,我不知道从这里去哪里。


解决方案是将字段添加到查询中(而不是声明要获取的顶级对象而不指定要获取的字段)。如果你有类似的东西:

{
  popups @client {
    id
    dialog
  }
}

你必须声明一些字段来获取内部dialog, 例如id:

{
  popups @client {
    id
    dialog {
      id
    }
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

缺少对象 GraphQL+Apollo 错误的选择集 的相关文章

随机推荐