Consuming Data with GatsbyJS Repository

Source code for Consuming Data with GatsbyJS Pluralsight Course.

Modules and braches.

• For module 2 - modules/1 branch
• For module 3 - modules/2 branch
• For module 4 - modules/3 branch
• For module 5 - modules/4 branch

Code Snippets

Code snippets used throughout the course.

Snippet 01

query MyQuery {
  posts {
    edges {
      node {
        id
        title
        slug
      }
    }
  }
}

Snippet 02

{
  resolve: 'gatsby-source-wordpress',
  options: {
    url: 'http://your-wordpress-url/graphql'
  }
}

Snippet 03

query {
  allWpPost {
    nodes {
      id
      title
      excerpt
      slug
      date(formatString: "MMMM DD, YYYY")
    }
  }
}

Snippet 04

allWpPost(sort: {fields: [date]}) {
  totalCount
  nodes {
    id
    title
    slug
    date(formatString: "MMMM DD, YYYY")
    featuredImage {
      node {
        sourceUrl
      }
    }
    categories {
      nodes {
        name
      }
    }
    excerpt
  }
}

Snippet 05

{data.allWpPost.nodes.map((node) => (
  <Article id={node.id}
    to={node.slug}
    keywords={node.categories.nodes.name}
    title={node.title}
    date={node.date}
    excerpt={node.excerpt} />
))}

Snippet 06

allWpPost(sort: {fields: [date]}) {
  nodes {
    slug
  }
}

Snippet 07

result.data.allWpPost.nodes.forEach((node) => {
  createPage({
    path: node.slug,
    component: path.resolve('./src/templates/post.js'),
    context: {
      slug: node.slug,
    },
  })
})

Snippet 08

const post = data.allWpPost.nodes[0]

Snippet 09

query($slug: String!) {
    allWpPost(filter: { slug: { eq: $slug } }) {
        nodes {
            title
            content
            featuredImage {
                node {
                    sourceUrl
                }
            }
        }
    }
}

Snippet 10

'gatsby-transformer-sharp',
'gatsby-plugin-sharp'

Snippet 11

imageUrl={node.featuredImage.node.sourceUrl}

Snippet 12

<img src={props.imageUrl} alt={props.title} width="150px" height="160px" />

Snippet 13

localFile {
    childImageSharp {
        fluid(maxWidth: 400, maxHeight: 250) {
            ...GatsbyImageSharpFluid
        }
    }
}

Snippet 14

const image = data.allWpPost.nodes[0].featuredImage.node.localFile.childImageSharp.fluid

Snippet 15

<Img fluid={image} key={image.src} />

For other snippets see the code-snippets folder.