GraphQL + ReactJS

Chinnasamy A

21 de Abril 2018

Introducción de GraphQL y React:

• GraphQL es un lenguaje de consulta extremadamente flexible Y React es la biblioteca JS para construir la interfaz del usuario, ambos desarrollados por Facebook.
• GraphQL es una de las formas de crear API’s.
• React es un desarrollo de UI basado en componentes.

¿Por qué usar GraphQL?

• • Obtenga muchos recursos en una sola solicitud.

Rest API vs GraphQL

Rest API :

Rest API tiene muchos puntos finales. Tiene un nombre diferente para diferentes API.

E.x.
User Server
User Server
User Server
User Server
User Server

GraphQL :

• • GraphQL tiene solo un punto final API. Nombre de API común.

Ex:
User Server

• • graphql-api para ejecutar la funcionalidad de api completa de su aplicación como iniciar sesión, suscribirse, agregar, … etc.

¿Cómo usar GraphQL en React?:

• Conceptos básicos:
  • • Construir la configuración de React:

      npm package
       (or)
      custom setup
      

    • Instalar el paquete graphQL:

      npm install --save react-apollo

    • Escribir el esquema de graphQL: El esquema GraphQL son tipos de objetos.

      Ex:
      query signInQuery {
       userDB {
       username
       password
       }
      }
      

      signInQuery —> schemaName userDB —–> DB name

    • Crear HOC (componentes de orden superior):

      Ex :
      const ExampleHOC = query signInQuery {
      userDB {
       username
      password
      }
      }
      

      ExampleHOC —-> Higher Order Component

    • Envolver el componente React:

      const MainComponent = graphql(ExampleHOC)(Login);
      

      Login —- UI Component * Inicie sesión en la funcionalidad API para envolver el componente de inicio de sesión. * Llamar a los accesorios de inicio de sesión es el activador de /graphql-API para la funcionalidad de inicio de sesión.