GraphQL es una alternativa a REST que Facebook lanzó al público en 2015 y que permite a los clientes de una API obtener exactamente los datos que quieren y nada más. Aunque su uso no ha sido muy extendido, muchos profesionales lo ven como una poderosa opción por su eficiencia y flexibilidad.
Aquí te dejamos una guía básica para utilizar GraphQL con JavaScript a través de la biblioteca Apollo Client:
1. Instalar Apollo Client:
Para empezar, tendrás que instalar la biblioteca Apollo Client. Asegúrate de tener instalado Node.js y luego abre la línea de comandos y escribe lo siguiente:
```bash
npm install apollo-boost @apollo/react-hooks graphql
```
2. Conectar el cliente GraphQL a la API:
Para llevar esto a cabo deberás ubicarte en tu archivo principal de Javascript y agregar lo siguiente:
```javascript
import ApolloClient from ‘apollo-boost’;
const client = new ApolloClient({
uri: ‘https://example.com/graphql’, //añadir la url del endpoint de GraphQL
});
```
3. Realizar consultas (Queries):
Establecerás las consultas que quieras hacer y que se llamarán más tarde. El esquema sería el siguiente:
```javascript
import { gql } from ‘apollo-boost’;
const GET_DOGS = gql`
{
dogs {
id
breed
}
}
`;
```
Esta consulta obtendría los datos de id y breed de todos los perros.
4. Usar Hooks de React para realizar y gestionar las consultas:
Usarías el hook `useQuery` que maneja el ciclo de vida completo de tu petición a GraphQL, desde la carga hasta los errores. Estos son algunos ejemplos:
```javascript
import React from ‘react’;
import { useQuery } from ‘@apollo/react-hooks’;
import { gql } from ‘apollo-boost’;
const GET_DOGS = gql`
{
dogs {
id
breed
}
}
`;
function Dogs({ onDogSelected }) { const { loading, error, data } = useQuery(GET_DOGS);
if (loading) return ‘Loading…’; if (error) return `Error! ${error.message}`; return ( ); }export default Dogs;
```
5. Realizar Mutaciones:
Además de buscar datos con consultas, seguramente querrás modificarlos. Apollo Client tiene soporte para todo tipo de solicitudes que harías en una API REST (GET, POST, PUT, DELETE, etc.). Así puedes hacerlo:
```javascript
import React from ‘react’;
import { gql } from ‘apollo-boost’;
import { useMutation } from ‘@apollo/react-hooks’;
const ADD_DOG = gql`
mutation AddDog($breed: String!) {
addDog(breed: $breed) {
id
breed
}
}
`;
function AddDog() { let input; const [addDog, { data }] = useMutation(ADD_DOG);
return (export default AddDog;
```
Este ejemplo agrega un nuevo perro a través de una mutación.
Ten en cuenta que estos ejemplos son muy básicos y para entender cómo funciona GraphQL con JavaScript necesitarías profundizar un poco más en la materia. Te recomendamos la documentación oficial de Apollo Client (https://www.apollographql.com/docs/react/) para obtener más información, así como también consultar la especificación oficial de GraphQL (https://graphql.github.io/graphql-spec/).
