缺少對象 GraphQL+Apollo 的選擇集錯誤

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

解決方案是向查詢添加字段（與聲明要獲取的頂級對象而不指定要獲取的字段相比）。 如果你有類似的東西：

{
  popups @client {
    id
    dialog
  }
}

您必須聲明一些字段以在dialog內獲取，例如id ：

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