graphql - relay modern

¿Cuál es el significado del campo del visor en GraphQL?

Question

¿Cuál es el propósito del viewer campo de consulta raíz en GraphQL?

En función de este artículo , el viewer se puede usar para aceptar un parámetro de token para que podamos ver quién está conectado actualmente.

¿Cómo debo implementarlo?

Answer 1

Propósito del campo de consulta raíz del viewer

viewer no es algo específico de GraphQL o Relay. La mayoría de las aplicaciones web sirven a algunos propósitos de sus usuarios o espectadores. La entidad de nivel superior para modelar los diversos datos servidos al usuario se puede nombrar como viewer . También puedes nombrarlo user . Por ejemplo, el ejemplo de Relay todo tiene un campo de consulta raíz del viewer :

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

También podemos prescindir de viewer . Por ejemplo, el ejemplo de Relay starwars no tiene ningún campo de consulta raíz del viewer .

En resumen, tener este viewer como campo de consulta raíz del esquema GraphQL nos permite proporcionar datos basados ​​en el usuario actual.

Implementación: Cómo usar el token de autenticación junto con el espectador

Mi respuesta sigue lo que ya se describe en el artículo mencionado. Los pasos son:

1. En el lado del servidor, cree una mutación para obtener un token de autenticación. Llamémoslo LoginMutation . La entrada a esta mutación son las credenciales del usuario y la salida es un token de autenticación.

2. En el lado del cliente, si usa un marco de retransmisión , implemente una mutación del lado del cliente. Después de que la mutación sea exitosa, almacene el token de autenticación.

3. En el código de retransmisión del lado del cliente, agregue el parámetro authToken para sus consultas de viewer . El valor de authToken es el token de autenticación recibido después de una mutación de inicio de sesión exitosa.

Una alternativa

Como ya se mencionó en el artículo, una forma alternativa de autenticar al usuario es hacerlo fuera de GraphQL. Es posible que desee ver dos respuestas excelentes, this y this para más detalles.

Jonas Helfer escribió un artículo en dos partes sobre este tema, que le resultará muy útil: Parte 1 , Parte 2