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