Let's Learn 11ty Part 9: Data Revisited

Let's Learn 11ty Part 9: Data Revisited

Read 764 times

#eleventy

#ssg

#tutorial

#webdev

We are back again with more Eleventy. I said I would come back and explain and showcase some things when I understood them better.

That time has arrived!

To explain these concepts more clearly, I will not be using the learneleventy project we already have. I am going to make a new one with the sole purpose of elaborating the concepts we left over.

You don’t have to start a new project. You will however need to make some modifications to the project we were working on. I nevertheless suggest you do - to see things in isolation and then incorporate them later.

Don’t worry, I’ll explain what you have to do if you’re using the existing version.

For Those Starting A New Project

If you are starting afresh follow this series steps until Part 4.

For Those Using The Project We Have

If you are using the project we have, make these changes:

External Data

What we are going to do now is fetch data (posts) from elsewhere and render it on our site.

For that, we will use the Hashnode API because it is one of the more straightforward ones to interact with for our particular use case.

Before We Begin

To communicate with Hashnode, we will need to install a couple of packages, namely:

npm install graphql graphql-request

Bringing Posts Into Our Project

If you recall this:

Global data refers to files we place in the _data folder. In most instances we use global data for things we want site wide, for example the site title and description.

I must add an addendum to this. The other thing we use the _data folder for is to get data from external sources, like APIs.

To fetch our posts from Hashnode, we are going to create a file to fetch them in the _data

Let’s first look at what the response from Hashnode looks like:

hashnode response

On the left is the query we have to make, on the right is the data we get back.

With this knowledge, we can move on.

Let’s make a file in _data called posts.js and put this in it:

/* src/_data/posts.js */

const endpoint = `https://api.hashnode.com/`;

module.exports = async () => {
  const { GraphQLClient, gql } = require("graphql-request");

  const client = new GraphQLClient(endpoint);

  const query = gql`
    {
      user(username: "Psypher1") {
        publication {
          posts {
            title
            coverImage
            brief
            slug
            dateAdded
            contentMarkdown
          }
        }
      }
    }
  `;

  const posts = await client.request(query);

  return posts.user.publication.posts;
};

If you have a Hashnode account, feel free to replace Psypher1 - my username - with yours.

Next, we are going to go into our blog.njk file and make sure our for loop looks like this:

<!-- src/blog.njk -->
<h1 class="">Blog Home</h1>

<ul class="">
    {% for post in posts %}
        <li >
            <a class="" href="/blog/{{ post.slug}}">{{ post.title }}</a>
        </li>
    {% endfor %}
</ul>

Things to note:

NOTE: Info/files in the _data folder can be accessed from anywhere on your site

blog home

With a few modification we now have a new list of posts fetched from and external source

Computed Data

As we are now able to display the fetched posts, we can now work rendering the individual posts.

Let’s make a new file called postLayout.njk file and have this in it:

<!-- src/_layouts/postLayout.njk -->

---
layout: base
pagination: 
    data: posts
    size: 1
    alias: post
permalink: "/blog/{{post.slug | slugify }}/"
templateEngineOverride: njk,md
eleventyComputed:
    title: "{{post.title | safe}}"
---


<div>
<h1>{{post.title}}</h1>
    
{{post.contentMarkdown}}
</div>

Let’s focus in on the frontmatter:

eleventyComputed

This falls under the Computed Data of Eleventy’s Data Cascade. At the end of it - the cascade - we may want to add additional data to our templates. That is where the eleventyComputed key comes in. We have used it to add title to our individual post’s meta tag - the same key we set for our pages when we began this journey.

NOTE: slugify is the improved slug filter that helps us create more readable URLs - from now on we use slugify

Let’s now move to our blog folder and in it make a post.njk file with this in it:

<!-- src/blog/post.njk -->

---
layout: postLayout
---

If we have done everything correctly, pages for our posts should have been generated and we can navigate to them:

single post

it doesn’t look pretty, but we can now read our posts on our Eleventy site

Some FAQ Stuff

Why don’t I have the parts as separate branches in the repository? The thought crossed my mind, but a couple of things stopped me from doing that:

Conclusion

With some time, research and a lot of asked questions we now have a better understanding of Eleventy’s Data.

In this article we:

As always:

Thank you for reading, let’s connect!

Thank you for visiting this little corner of mine. Let’s connect on Twitter, Polywork and LinkedIn

Back to articles