Contentful Source

Plugin para extraer tipos de contenido, entradas y activos en Gatsby desde espacios Contentful. Crea enlaces entre tipos de entrada y activos para que puedan consultarse en Gatsby usando GraphQL.

Instalación

SHELL

npm install --save gatsby-source-contentful

Como se usa

Primero, necesita una forma de pasar las variables de entorno al proceso de compilación, por lo que los secretos y otros datos seguros no están comprometidos con el control de origen. Se recomienda utilizar dotenv, que luego expondrá las variables de entorno.

Usando Delivery API

gatsby-config.js

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

Consulta graphQL a Contentful

Gatsby por defecto usa graphQL para conectarse a los origines de datos y obtener la data. En nuestro ejemplo vamos a crear un archivo donde definiremos esta consulta.

src/hooks/use-contentful-projects.jsx

import { graphql, useStaticQuery } from 'gatsby'

const useContentfulProjects = () => {
  const data = useStaticQuery(graphql`
    query {
      allContentfulProjects {
        edges {
          node {
            projects {
              ...contentfulProject
            }
          }
        }
      }
    }

    fragment contentfulProject on ContentfulProjectItem {
      title
      about
      link
      background
    }
  `)

  if (data && data.allContentfulProjects) {
    return data.allContentfulProjects.edges[0].node.projects
  }

  return []
}

export default useContentfulProjects

Ahora vamos a crear un componente para mostrar cada uno de estos proyectos. Este componente usara props para mostrar los valores.

src/components/project-card.jsx

import React from 'react'

const ProjectCard = ({ link, title, about, background }) => (
  <a
    href={link}
    target="_blank"
    rel="noreferrer noopener"
    style={{
      width: `100%`,
      position: `relative`,
      textDecoration: `none`,
      color: `white`,
      background: background || `none`,
      transition: `all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important`,
    }}
  >
    <p>
      {title}
    </p>
    <p>{about}</p>
  </a>
)

export default ProjectCard

Teniendo creado el componente de cada proyecto, es hora de crear el componente para mostrar todos los proyectos, un padre.

src/components/projects.jsx

import React from 'react'

import ProjectCard from './project-card'
import useContentfulProjects from '../hooks/use-contentful-projects'

const Projects = () => {
  const projects = useContentfulProjects()
  console.log("TCL: Projects -> projects", projects)

  return (
    <div>
      <h3>Projects</h3>
      <ul>
        {
          projects.map((project, idx) => (<ProjectCard key={idx} {...project} />))
        }
      </ul>
    </div>
  )
}

export default Projects

En este archivo especificamente llamamos al query que se utilizara para traer los proyectos.

Finalmente, solo queda importar el archivo projects en nuestra pagina index para ver los proyectos que tenemos en contentful.

src/pages/index.js

import React from 'react'

import SEO  from '../components/seo'
import Hero  from '../components/hero'
import Projects  from '../components/projects'

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Hero />
    <Projects />
  <Layout>
)

export default IndexPage

Veremos algo como esto en nuestro proyecto.

Projects from Contentful

Código de referencia: Github