Peticiones a una API Rest con Gatsby.

July 30, 2019 • ☕️ 2 minutos de lectura

Hace poco que empecé con este blog, la idea era crear un sitio, con algunos tips de programación, para devolver a la comunidad todo lo que me ha dado.

El caso es que para crearlo usé Gatsby starter blog y voy a explicar como hacer peticiones a una API Rest y como consumirlas luego en Gatsby, usando el plugin gatsby-source-apiserver.

Para este ejemplo usaremos la api que nos proporciona https://jsonplaceholder.typicode.com

Debemos instalar el plugin gatsby-source-apiserver

Este plugin entre sus Caracteristicas

  • Extrae datos de la URL de API configurada
  • Utiliza un nombre personalizado para permitir múltiples instancias de complementos
  • Opción para descargar los datos json a una ruta configurable
  • Opción para descargar solo los datos json y omitir insertarlos en GraphQL
  • Admite autenticación simple a través de axios
npm install --save gatsby-source-apiserver

Editamos el fichero gatsby-config.js, es el fichero de configuración principal de Gatsby. Contiene metadata del sitio, los plugins que tenemos instalados o queremos instalar.

plugins: [
    {
      resolve: 'gatsby-source-apiserver',
      options: {
        name: 'Articles',
        typePrefix: 'api',
        data: {
          ns: 'posts',
          method: 'articles',
        },
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'GET',
        auth: false,
        headers: {
          'Content-Type': 'application/json',
        },
        verboseOutput: process.env.NODE_ENV !== 'production',
      },
    }
]

Para ver que todo funciona corréctamente, vamos a entrar en nuestra consola de GraphQL: http://localhost:8000/___graphql

allApiArticles {
    edges {
        node {
        id
        title
        body
        }
    }
}

Debemos obtener un resultado como este:

Resultado de query graphql

Una vez editado el fichero, ahora debemos crear la página en la que consumiremos dicha API, para ello debemos crear un nuevo fichero en el directorio src/pages/

El enrutado de Gatsby funciona de tal forma que si creamos un fichero .js en dicho src/pages/ nos la cargará automáticamente en su http://localhost:8000/nombredelfichero

En nuestro caso, vamos a crear un fichero llamado posts.js

touch src/pages/posts.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
class PostIndex extends React.Component {
  render() {
    const { data } = this.props
    const siteTitle = data.site.siteMetadata.title
    const postApi = data.allApiArticles.edges
    return (
      <Layout location={this.props.location} title={siteTitle}>
        {postApi.map(({ node }) => {
          const title = node.title || node.userId
          return (
            <div key={node.title}>
              <h3
                style={{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                <Link style={{ boxShadow: `none` }} to={`/post/${node.id}`}>
                  {title}
                </Link>
              </h3>

              <p
                dangerouslySetInnerHTML={{
                  __html: node.body,
                }}
              />
            </div>
          )
        })}
      </Layout>
    )
  }
}

export default PostIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allApiArticles {
      edges {
        node {
          id
          title
          body
        }
      }
    }
  }
`

Ahora si entramos en nuestra url http://localhost:8000/posts podremos ver los resultados pintados en nuestra web.

Sigue con este artículo Peticiones a una API Rest con Gatsby - Parte II.