Build a Modern Blog with Gatsby and MongoDB

1
gatsby new booksplus

1
gatsby develop

1
query MyQuery {
2
  allSitePage {
3
    totalCount
4
  }
5
}

1
query MyQuery {
2
  allSitePage {
3
    totalCount
4
    nodes {
5
      path
6
    }
7
  }
8
}

1
npm install --save gatsby-source-mongodb

1
{
2
    // The name of the plugin
3
    resolve: 'gatsby-source-mongodb',
4
    options: {
5
        // Name of the database and collection where are books reside
6
        dbName: 'gatsby',
7
        collection: 'books',
8
        server: {
9
            address: 'main-shard-00-01-zxsxp.mongodb.net',
10
            port: 27017
11
        },
12
        auth: {
13
            user: 'ado',
14
            password: 'password'
15
        },
16
        extraParams: {
17
            replicaSet: 'Main-shard-0',
18
            ssl: true,
19
            authSource: 'admin',
20
            retryWrites: true
21
        }
22
    }
23
},

1
query MyQuery {
2
  allMongodbGatsbyBooks {
3
    edges {
4
      node {
5
        title
6
      }
7
    }
8
  }
9
}

1
import React from "react"
2
import { Link } from "gatsby"
3
4
import Layout from "../components/layout"
5
6
const IndexPage = () => (
7
  <Layout>
8
    <div className="book-container">
9
10
    </div>
11
  </Layout>
12
)
13
14
export default IndexPage

1
import React from "react"
2
import { Link } from "gatsby"
3
import { graphql } from "gatsby"
4
5
import Layout from "../components/layout"
6
7
const IndexPage = () => (
8
  <Layout>
9
    <div className="book-container">
10
11
    </div>
12
  </Layout>
13
)
14
15
export default IndexPage
16
17
export const pageQuery = graphql`
18
  query {
19
    allMongodbGatsbyBooks {
20
      edges {
21
        node {
22
          id
23
          title
24
          shortDescription
25
          thumbnailUrl
26
        }
27
      }
28
    }
29
  }
30
`

1
import React from "react"
2
import { Link } from "gatsby"
3
import { graphql } from "gatsby"
4
5
import Layout from "../components/layout"
6
7
const IndexPage = (props) => {
8
  const books = props.data.allMongodbGatsbyBooks.edges;
9
10
  return (
11
    <Layout>
12
      <div className="book-container">
13
14
      </div>
15
16
    </Layout>
17
  )
18
}
19
20
export default IndexPage
21
22
export const pageQuery = graphql`
23
  query {
24
    allMongodbGatsbyBooks {
25
      edges {
26
        node {
27
          id
28
          title
29
          shortDescription
30
          thumbnailUrl
31
        }
32
      }
33
    }
34
  }
35
`

1
return (
2
  <Layout>
3
    <div className="book-container">
4
      {books.map(book =>
5
          <div className="book">
6
              <Link to={'/book/' + book.node.id}>
7
                  <img src={book.node.thumbnailUrl} />
8
                  <h2>{book.node.title}</h2>
9
                  <p>{book.node.shortDescription}</p>
10
              </Link>
11
          </div>
12
      )}
13
    </div>
14
  </Layout>
15
)

1
.book-container {
2
  display: flex;
3
  flex-direction: row;
4
  flex-wrap: wrap
5
}
6
7
.book {
8
  width: 25%;
9
  flex-grow: 1;
10
  text-align: center;
11
}
12
13
.book img {
14
  width: 50%;
15
}

1
const IndexPage = (props) => {
2
  const books = props.data.allMongodbGatsbyBooks.edges;
3
4
  return (
5
    <Layout>
6
7
      <div className="book-container">
8
      {books.map(book =>
9
            <div className="book">
10
              {book.node.thumbnailUrl &&
11
                <Link to={'/book/' + book.node.id}>
12
                    <img src={book.node.thumbnailUrl}/>
13
                </Link>
14
              }
15
            </div>
16
      )}
17
      </div>
18
19
    </Layout>
20
  )
21
}

1
import React from "react"
2
import { graphql } from "gatsby"
3
import Layout from "./layout"
4
5
class Item extends React.Component {
6
  render() {
7
    const book = this.props.data.mongodbGatsbyBooks
8
9
    return (
10
      <Layout>
11
        <div>
12
          <img src={book.thumbnailUrl} />
13
          <h1>{book.title}</h1>
14
          <p>By {book.authors.map(author => ( <span>{author}, </span>))}</p>
15
          <p>{book.longDescription}</p>
16
          <p>Published: {book.publishedDate} | ISBN: {book.isbn}</p>
17
          {book.categories.map(category => category)}
18
        </div>
19
      </Layout>
20
    )
21
  }
22
}
23
24
export default Item
25
26
export const pageQuery = graphql`
27
  query($id: String!) {
28
    mongodbGatsbyBooks(id: { eq: $id }) {
29
      id
30
      title
31
      longDescription
32
      thumbnailUrl
33
      isbn
34
      pageCount
35
      publishedDate(formatString: "MMMM DD, YYYY")
36
      authors
37
      categories
38
    }
39
  }
40
`

1
const path = require('path')
2
3
exports.createPages = async ({ graphql, actions }) => {
4
  const { createPage } = actions
5
6
  const { data } = await graphql(`
7
    {
8
      books: allMongodbGatsbyBooks {
9
        edges {
10
          node {
11
            id
12
          }
13
        }
14
      }
15
    }
16
  `)
17
18
  const pageTemplate = path.resolve('./src/components/book.js')
19
20
  for (const { node } of data.books.edges) {
21
    createPage({
22
      path: '/book/${node.id}/',
23
      component: pageTemplate,
24
      context: {
25
        id: node.id,
26
      },
27
    })
28
  }
29
}

1
---
2
title: Welcome to Books Plus
3
author: Ado Kukic
4
slug: welcome
5
---
6
7
Welcome to BooksPlus, your trusted source of tech book reviews!

1
{
2
    resolve: 'gatsby-source-filesystem',
3
    options: {
4
    name: 'content',
5
    path: `${__dirname}/src/content/`,
6
    },
7
},
8
'gatsby-transformer-remark',

1
query MyQuery {
2
  allMarkdownRemark {
3
    edges {
4
      node {
5
        frontmatter {
6
          title
7
          author
8
        }
9
        html
10
      }
11
    }
12
  }
13
}

1
import React from "react"
2
import { graphql } from "gatsby"
3
import Layout from "./layout"
4
5
class Blog extends React.Component {
6
  render() {
7
    const post = this.props.data.markdownRemark
8
9
    return (
10
      <Layout>
11
        <div>
12
          <h1>{post.frontmatter.title}</h1>
13
          <h2>By {post.frontmatter.author}</h2>
14
          <div
15
          className="blog-post-content"
16
          dangerouslySetInnerHTML={{ __html: post.html }}
17
        />
18
        </div>
19
      </Layout>
20
    )
21
  }
22
}
23
24
export default Blog
25
26
export const pageQuery = graphql`
27
  query($id: String!) {
28
    markdownRemark(frontmatter : {slug: { eq: $id }}) {
29
      frontmatter { 
30
          title
31
          author
32
      }
33
      html
34
    }
35
  }
36
`

1
const path = require('path')
2
3
exports.createPages = async ({ graphql, actions }) => {
4
  const { createPage } = actions
5
6
  const { data } = await graphql(`
7
    {
8
      books: allMongodbGatsbyBooks {
9
        edges {
10
          node {
11
            id
12
          }
13
        }
14
      }
15
      posts: allMarkdownRemark {
16
        edges {
17
          node {
18
            frontmatter {
19
              slug
20
            }
21
          }
22
        }
23
      }
24
    }
25
  `)
26
27
  const blogTemplate = path.resolve('./src/components/blog.js')
28
  const pageTemplate = path.resolve('./src/components/book.js')
29
30
  for (const { node } of data.posts.edges) {
31
32
    createPage({
33
      path: `/blog/${node.frontmatter.slug}/`,
34
      component: blogTemplate,
35
      context: {
36
        id: node.frontmatter.slug
37
      },
38
    })
39
  }
40
41
  for (const { node } of data.books.edges) {
42
    createPage({
43
      path: `/book/${node.id}/`,
44
      component: pageTemplate,
45
      context: {
46
        id: node.id,
47
      },
48
    })
49
  }
50
}

1
import React from "react"
2
import { Link } from "gatsby"
3
import { graphql } from "gatsby"
4
5
import Layout from "../components/layout"
6
7
const IndexPage = (props) => {
8
  const books = props.data.books.edges;
9
  const posts = props.data.posts.edges;
10
11
  return (
12
    <Layout>
13
      <div className="posts">
14
        {posts.map(post =>
15
          <div className="post">
16
            <h2><Link to={"/blog/" + post.node.frontmatter.slug}>{post.node.frontmatter.title}</Link></h2>
17
            <p>By {post.node.frontmatter.author}</p>
18
          </div>)}
19
      </div>
20
      <div className="book-container">
21
      {books.map(book =>
22
            <div className="book">
23
              {book.node.thumbnailUrl &&
24
                <Link to={'/book/' + book.node.id}>
25
                    <img src={book.node.thumbnailUrl}/>
26
                </Link>
27
              }
28
            </div>
29
      )}
30
      </div>
31
32
    </Layout>
33
  )
34
}
35
36
export default IndexPage
37
38
export const pageQuery = graphql`
39
  query {
40
    posts: allMarkdownRemark {
41
      edges {
42
        node {
43
          frontmatter {
44
            title
45
            slug
46
            author
47
          }
48
        }
49
      }
50
    }
51
    books: allMongodbGatsbyBooks {
52
      edges {
53
        node {
54
          id
55
          title
56
          shortDescription
57
          thumbnailUrl
58
        }
59
      }
60
    }
61
  }
62
`

1
allMarkdownRemark {
2
    edges {
3
        node {
4
        frontmatter {
5
            slug
6
            book
7
        }
8
        }
9
    }
10
    }
11
    ...
12
}

1
createPage({
2
      path: `/blog/${node.frontmatter.slug}/`,
3
      component: blogTemplate,
4
      context: {
5
        id: node.frontmatter.slug,
6
        book: node.frontmatter.book
7
      },
8
    })
9
  }

1
export const pageQuery = graphql`
2
  query($id: String!, $book: String) {
3
    post: markdownRemark(frontmatter : {slug: { eq: $id }}) {
4
      id
5
      frontmatter {
6
          title
7
          author
8
      }
9
      html
10
    }
11
    book: mongodbGatsbyBooks(id: { eq: $book }) {
12
        id
13
        thumbnailUrl
14
      }
15
    }
16
`

1
class Blog extends React.Component {
2
  render() {
3
    const post = this.props.data.post
4
    const book = this.props.data.book
5
6
    return (
7
      <Layout>
8
        <div>
9
          <h1>{post.frontmatter.title}</h1>
10
          <h2>By {post.frontmatter.author}</h2>
11
          <div
12
          className="blog-post-content"
13
          dangerouslySetInnerHTML={{ __html: post.html }}
14
        />
15
16
        {book && 
17
        <Link to={"/book/" + book.id}>
18
            <img src={book.thumbnailUrl} />
19
        </Link>
20
        }
21
        </div>
22
      </Layout>
23
    )
24
  }
25
}

1
---
2
title: MongoDB In Action Book Review
3
author: Ado Kukic
4
slug: mdb-in-action-review
5
book: 30e4050a-da76-5c08-a52c-725b4410e69b
6
---
7
8
MongoDB in Action is an essential read for anybody wishing to learn the ins and outs of MongoDB. Although the book has been out for quite some time, it still has a lot of valuable information and is a great start to learning MongoDB.