web-dev-qa-db-ja.com

オブジェクトGraphQL + Apolloエラーの選択セットがありません

特定のタイプのポップアップのローカル状態をトリガーする一連のミューテーションがあります。それらは通常、次のように設定されます。

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

それらがmy 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>
    );
  }
}

私のさまざまなポップアップ（menuとmodalのような3つまたは4つの異なるポップアップがある）の場合、それらを開いたり閉じたりするためのミューテーションはすべて同じに見えますが、タイプ名やコンテンツが異なるだけです。しかし、ダイアログの場合、クリックするとこのエラーが発生します。

ネットワークエラー：クエリフィールドダイアログに返されたダイアログタイプのオブジェクトの選択セットがありません

...その後、トリガーコンポーネントがページから消えます。さらに、それが発生すると、他のすべてのポップアップタイプをクリックしてそれらをもう一度クリックしようとすると、そのタイプのエラーが再スローされるか、次のように言うことができます。

キャッチされないエラー：クロスオリジンエラーがスローされました。Reactは、開発中の実際のエラーオブジェクトにアクセスできません。

他のポップアップタイプと一致するようにダイアログを書き直し、コンポーネントも書き直してみましたが、それでもこのエラーが発生します。ダイアログ+アポロ固有のように見えます。この問題の原因は何でしょうか？これはローカルのアポロのみを扱っているため、バックエンドのことはできません。これまでにこのエラーを見たことがなく、ここからどこに進むべきかわかりません。

javascriptreactjsgraphqlapolloreact-apollo
9
Cassidy Williams

これに対する修正は、dialogフィールドをオブジェクトではなく文字列として扱うことで機能することがわかりました。関数をこれに変更すると、トリックが発生し、エラーが解消されます。

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

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

同じ問題のエラーメッセージがありました。これと同じエラーメッセージが表示されるこれまでのStackoverflowの唯一の質問のようです。

私は私の側面を書き留めます

私の場合、オブジェクトのフィールドをクエリしないクエリがあります。この場合と同様に、私が持っているクエリは次のようになります

{
  popups @client {
    id
    dialog
  }
}

そのはず

{
  popups @client {
    id
    dialog {
      id
    }
  }
}
9
Vic

実際の問題への答えはクエリにあるようです。当初、Apolloクライアントは@clientクエリ/ミューテーションのタイプを検証していなかったため、ミューテーションは質問で書いたように見える可能性があります。

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

上記の正しい記述方法は、応答で取得するすべての単純型（スカラー）フィールドを指定（選択）することです。したがって、@ Vicの回答に関しては、突然変異は次のようになります。

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