web-dev-qa-db-fra.com

Jeu de sélection manquant pour l'objet GraphQL + erreur Apollo

J'ai un ensemble de mutations qui déclenchent l'état local de certains types de popups. Ils sont généralement configurés comme ceci:

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

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

Et les valeurs par défaut que je passe ressemblent à:

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

La façon dont ils sont utilisés dans mon code React est avec un composant wrapper Mutation, comme ceci:

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

Pour mes divers popups (j'ai 3 ou 4 différents, comme menu et modal), les mutations pour les ouvrir et les fermer se ressemblent toutes, mais des noms et du contenu différents, etc. sur eux:

Erreur réseau: jeu de sélection manquant pour l'objet de type Dialogue renvoyé pour la boîte de dialogue du champ de requête

... et le composant déclencheur disparaît de la page. De plus, une fois que cela se produit, tous les autres types de popups disparaissent lorsque vous essayez de cliquer dessus, et relancez cette erreur ou dites:

Erreur non capturée: une erreur d'origine croisée a été générée. React n'a pas accès à l'objet d'erreur en cours de développement.

J'ai essayé de réécrire les dialogues pour les faire correspondre à d'autres types de popup, et de réécrire les composants également, mais je reçois toujours cette erreur. Cela semble être spécifique au dialogue + Apollo . Quelle pourrait être la racine de ce problème? Cela ne peut pas être une affaire d’arrière-plan, car il s’agit uniquement d’Apollo local. Je n'ai jamais vu cette erreur auparavant et je ne sais pas trop où aller à partir de maintenant.

javascriptreactjsgraphqlapolloreact-apollo
6
Cassidy Williams

La solution à ce problème a fonctionné en traitant le champ dialog comme une chaîne plutôt qu'un objet. Changer la fonction à ceci a fait le tour et fait disparaître les erreurs:

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

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

A eu le même message d'erreur de problème. On dirait que c'est la seule question dans stackoverflow jusqu'à présent avec le même message d'erreur dans la question.

Je vais juste noter mon côté des choses

Dans mon cas, j'ai une requête qui n'interroge pas les champs de l'objet. Anagole à ce cas, la requête que j'ai ressemble à ceci

{
  popups @client {
    id
    dialog
  }
}

CA devrait etre

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