web-dev-qa-db-fra.com

Quelle est la signification du champ de visionneuse dans GraphQL?

À quoi sert le champ de requête racine viewer dans GraphQL?

Basé sur cet article , viewer pourrait être utilisé pour accepter un paramètre de jeton afin que nous puissions voir qui est actuellement connecté.

Comment dois-je l'implémenter?

graphqlrelayjs
26
Sibelius Seraphini

Objet du champ de requête racine viewer

viewer n'est pas quelque chose de spécifique à GraphQL ou Relay. La plupart des applications Web servent à certaines fins de ses utilisateurs ou téléspectateurs. L'entité de niveau supérieur pour modéliser les diverses données servies à l'utilisateur peut être nommée viewer. Vous pouvez également le nommer user. Par exemple, le exemple de tâche de relais a un champ de requête racine viewer:

viewer: {
  type: GraphQLUser,
  resolve: () => getViewer(),
},

Nous pouvons également nous passer de viewer. Par exemple, exemple Relay starwars n'a pas de champ de requête racine viewer.

En bref, avoir ce viewer comme champ de requête racine du schéma GraphQL nous permet de fournir des données basées sur l'utilisateur actuel.

Implémentation: comment utiliser le jeton d'authentification avec la visionneuse

Ma réponse suit ce qui est déjà décrit dans votre article mentionné. Les étapes sont les suivantes:

  1. Côté serveur, créez une mutation pour obtenir un jeton d'authentification. Appelons-le LoginMutation. L'entrée de cette mutation sont les informations d'identification de l'utilisateur et la sortie est un jeton d'authentification.

  2. Côté client, si vous utilisez framework relais , implémentez une mutation côté client. Une fois la mutation réussie, stockez le jeton d'authentification.

  3. Sur le code de relais côté client, ajoutez le paramètre authToken pour vos requêtes viewer. La valeur de authToken est le jeton d'authentification reçu après une mutation de connexion réussie.

Une alternative

Comme déjà mentionné dans l'article, une autre façon d'authentifier l'utilisateur est de le faire en dehors de GraphQL. Vous voudrez peut-être voir deux excellentes réponses this et this pour plus de détails.

Jonas Helfer a écrit un article en deux parties à ce sujet, que vous trouverez très utile: Partie 1 , Partie 2

34
Ahmad Ferdous

L'idée derrière le champ viewer (modèle de conception) était de regrouper les champs de requête de niveau supérieur qui ne concernent que l'utilisateur actuellement connecté. Par exemple:

# EXAMPLE 1

quer {
  viewer {
    stories { ... } # the list of published stores as well as drafts (current user)
  }

  stories { ... }   # the list of published stories (all users)
}

Ces données utilisateur actuellement enregistrées ont été fusionnées dans le champ viewer lui-même ou imbriquées sous celui-ci:

# EXAMPLE 2

query {
  viewer {
    id
    email
    displayName
    stories { ... }
  }
}

# EXAMPLE 3

query {
  viewer {
    me { id email displayName }
    stories { ... }
  }
}

Les trois exemples ci-dessus peuvent être simplifiés en supprimant complètement le champ viewer et ont toujours la même fonctionnalité (recommandée):

query {
  # The currently logged in user or NULL if not logged in
  me {
    id
    email
    displayName
  }

  # Published stories only (all users)
  stories {
    ...
  }

  # Published stories as well as drafts (the current user)
  stories(drafts: true) {
    ...
  }
}

Vous pouvez trouver l'exemple complet dans React Starter Kit qui peut être utilisé soit comme projet de référence, soit comme graine/modèle pour de nouveaux développements. Voir src/server/schema.js .

1
Konstantin Tarkus