GraphQL + ReactJS

GraphQL + ReactJS

tudip-logo

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

GraphQLwithReactJS 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.

Request a quote