Consumir una API de GraphQL usando fetch – React Client

En este artículo, aprenderemos a desarrollar una aplicación React, que obtendrá los datos de una API GraphQL pública mediante Fetch. Usaremos la API The Movie Database Wrapper (TMDB) para obtener los programas disponibles con nombre/palabra clave. Puede encontrar la referencia de la API y los enlaces del código fuente al final de este artículo.

Antes de pasar a la parte de desarrollo, para inicializar una aplicación de reacción simple, puede seguir los pasos que se mencionan a continuación: 

Paso 1: Crea la aplicación React.

npx create-react-app foldername

Paso 2: Mover a la carpeta del proyecto.

cd foldername

Paso 3: cree una carpeta de componentes y ahora la estructura del proyecto se verá así:

Estructura del proyecto

Esta fue básicamente la configuración inicial que requerimos para nuestra aplicación. Ahora echemos un vistazo a cada uno de los componentes individualmente. Los componentes personalizados residen en la carpeta de componentes, con todo reunido en MainComponent.jsx, colocaremos este componente dentro de App.js, que a su vez se encuentra debajo del Node DOM «raíz», y todo lo que se encuentra dentro de este Node será administrado por React DOM .

Vamos a desarrollar tres componentes:

• Componente Principal: Responsable de la operación de búsqueda y cambios de estado en la aplicación.
• Barra de búsqueda: una barra de búsqueda para obtener la entrada del usuario para el nombre/palabra clave del programa.
• ShowInfoCard: un componente reutilizable para mostrar la información del espectáculo.

Paso 4: en el componente MainComponent.jsx , tenemos una variable de estado, datos que contendrán la respuesta para la API de GraphQL. 

const [data, setData] = useState(Object);

Para obtener la información, hacemos una llamada a apiEndpoint, pero primero separemos la consulta de GraphQL , en general, para formar una consulta, debe especificar campos dentro de los campos hasta que esos campos se resuelvan en datos reales. De esta manera, solicita campos específicos en los objetos y obtiene exactamente lo que solicitó. La estructura de cualquier consulta de GraphQL se ve así: 

query {
    JSON objects to retrieve
}

Con nuestra variable de consulta, intentamos obtener todos los programas disponibles, usando nombre/palabra clave, que se pasa como argumento con $término. 

const apiEndpoint = "https://tmdb.apps.quintero.io/";
const query = `
    query FetchData($term: String!){
        tv{
            search(term:$term){
              edges{
                node{
                    id
                    originalName
                }
              }
           }
        }
     }
`;

Para realizar la solicitud mediante Fetch API, enviamos la consulta y las variables de GraphQL como un objeto JSON al punto final. El punto final de GraphQL espera que el cuerpo de la solicitud sea un objeto JSON en forma de string que contenga parámetros de consulta y variables. Cuando se completa la solicitud, la promesa se resuelve con el objeto de respuesta. Este objeto es básicamente un marcador de posición genérico para varios formatos de respuesta. response.json() se usa para extraer el objeto JSON de la respuesta, devuelve una promesa, que se resuelve nuevamente y se actualizan los datos .
MainComponent.jsx (parte de solicitud)

const getData = (term) => {
       fetch(apiEndpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
               query,
               variables: { term }
           })
       })
           .then(res => res.json())
           .then((data) => setData(data))
           .catch(console.error);
 };

Entonces, finalmente, nuestro MainComponent.jsx se ve así:

import React, { useState } from "react";
import SearchBar from "./SearchBar";
import ShowInfoCard from "./ShowInfoCard";
  
function Main() {
    const [data, setData] = useState(Object);
    const apiEndpoint = "https://tmdb.apps.quintero.io/";
    const query = `
        query FetchData($term: String!){
            tv{
                search(term:$term){
                  edges{
                    node{
                        id
                        originalName
                    }
                  }
                }
              }
        }
    `;
  
    const getData = (term) => {
        fetch(apiEndpoint, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                query,
                variables: { term }
            })
        })
            .then(res => res.json())
            .then((data) => setData(data))
            .catch(console.error);
    };
    // console.log(data)
    return (
        <div>
            <SearchBar getData={getData} />
            {data.data ? data.data.tv.search.edges.map(({ node }) => (
                <ShowInfoCard key={node.id} node={node} />
            )) : <div></div>
            }
        </div>
    );
  
}
  
export default Main;

Paso 5: Ahora, pase al componente SearchBar, que tiene el propósito de recibir la entrada del usuario para el nombre/palabra clave. Es un componente simple, con un campo de entrada de tipo texto, y un botón para realizar la solicitud de búsqueda. El término de la variable de estado se actualiza, contiene la entrada del usuario y se pasa como argumento a getData() cuando el usuario realiza la solicitud de búsqueda.

import React, { useState } from "react";
  
function SearchBar({getData}){
    const [term, setTerm] = useState("");
    const onChange = (e) =>{
        setTerm(e.target.value)
    }
    const onSearch = () =>{
        getData(term)
    }
    return(
        <div className="searchbar">
        <input 
            placeholder="Enter the name..."
            type="text" 
            value={term}
            onChange={(event) => {onChange(event)}}
            onKeyUp={(event) => {onChange(event)}}
            onPaste={(event) => {onChange(event)}}
        />
        <button type="button" className="searchButton" 
                onClick={onSearch}>Search
        </button>
        </div>
    );
}
  
export default SearchBar;

Paso 6: Nuestro último componente es un componente de interfaz de usuario reutilizable, que es básicamente un componente de tarjeta que recibe un Node (contiene la información del programa) como accesorios y simplemente lo muestra en cualquier formato elegido. Puede modificar el archivo App.css para comprender los diversos aspectos del diseño. 

import React from "react";
  
function ShowInfoCard({ node }) {
    return (
        <div className="datacontainer">
            <div className="dataitem">
              Name : {node.originalName}
            </div>
        </div>
    );
}
  
export default ShowInfoCard;

Paso 7: finalmente, debemos incluir MainComponent en el archivo App.js :

import './App.css';
import React from "react";
import Main from './components/MainComponent';
  
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Consuming a GraphQL API</h2>
      </header>
      <Main />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Para ejecutar la aplicación en su sistema, ejecute el siguiente comando:

inicio de npm

Producción:

API GraphQL: https://github.com/nerdsupremacist/tmdb

Obtener API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API