Forem: Daniel Adetola

Google like a PRO! - A guide to productive Googling

Daniel Adetola — Wed, 21 Feb 2024 09:38:27 +0000

Someone once said, "The secret to getting anything is to ask properly". You either ask, bargain, or convince. Either way, you are simply making a request with the right parameters.

The Google search engine may not be a person, but we definitely need to ask questions to get results, so we need to ask properly.

In this article, we will delve into how Google works and how to get the exact answers you need from Google, every time (or at least, almost every time).

Let’s assume I wake up one morning and decide that I want to get fit. Well, then I need to start doing exercise. I need workouts. I need regular routines. So I’ll just check Google for some.

If I go to Google and search “regular gym exercises," I get something like this:

Not exactly what I want, eh? However, if I enter “gym workout routines", here's what I get:

That looks more like it!

Let's take another example. Some days ago I was wondering how the right amount of water always managed to remain at the bottom of a toilet bowl no matter how many times you flushed it. So the first time I asked Google, I asked “Why does the water in the toilet not drain away”. Here’s what I got:

Apparently, Google thought I was trying to fix a faulty toilet. which was definitely not what I intended. So I decided to rephrase the question and give it another shot. This time around, I typed in “How does the the toilet bowl hold water”. Here’s what I got this time around:

Now that explains it!

Now this begs the question - How do I get Google to give me the answers I want?
To answer that question, we need to first understand how Google works.

When you type a question into the Google search bar, here’s what happens:

Google's algorithms analyze the query (question) to understand its meaning, intent, and context. This involves breaking down the query into its constituent parts, such as keywords, phrases, and syntactic structures, using Natural Language Processing (NLP) to decipher the semantics, syntax, and context of the query and better understand the user's intent
Google's algorithms then go through the vast index of web pages and other online content that the search engine has crawled and then use hundreds of factors to determine the relevance of these web pages to a given query. These factors include the presence of keywords, the quality of content, user engagement metrics, and the authority of the website.
Finally, Google provides you with the answers or websites that closely match your query and are most likely to contain answers to your questions.

Now that you have this knowledge, let's look at ways to make sure you get the exact answers you want anytime you type into the search bar!

Tips for Getting Precise Answers from Google

1. Google is not a person:
Sometimes, we tend to have the common misconception that Google thinks like a human, probably because it can answer how, when, where, and who questions in our natural language. This is wrong. Google is just a set of algorithms, so all the “why”s, “where”s, and “who”s are mostly filtered out except for cases where they are very necessary parts of the question.

For example, “What is Obama's age”, or “How old is Obama”, can be simply reduced to “Obama age”. This is shorter and makes it easier for the search engine to pick out the keywords "Obama" and "age."

2. When querying Google, don't be an asker; be a commander:
While this does not apply to all questions and inquiries, this method still works pretty well. Don't go begging Google for information, because if you do, you might end up with vague and irrelevant information.

Take yourself as an interrogator and let Google be your suspect. As an interrogator, you don't ask, "Can you tell me?" rather, you say, "Tell me." Instead of “Is there a way for me to do xyz”, just say “How to do xyz”. The more direct the question, the better.

3. Use fewer, exact keywords:
Always remember that Google looks for keywords to identify your question topic and bring results, so you would want to use direct and specific keywords so that the search engine understands perfectly what you need to know.

This is also another reason we should always try to make our queries as short as possible - so that the chances of Google picking up unnecessary keywords are significantly reduced.

4. Ask yourself before asking Google:
Chances are, you might figure out the solution before even typing out the question if you do this. When confused and stuck, sit back and vocalize what you are trying to solve. A teammate told me it is called Rubber Duck Debugging (or Rubberducking). Pretend you're explaining the issue to someone who doesn't understand coding (or whatever line of profession your issue is coming from).

The problem is that we often think too much in one particular direction and fail to think that the problem question can be rephrased to give better search results.

5. Avoid the XY questions
The XY questions arise from XY problems. The XY problem is a communication problem where the question is about an end user's attempted solution (X) rather than the root problem itself (Y or Why?). It usually happens like this

User wants to do X.
User doesn't know how to do X, but thinks they can fumble their way to a solution if they can just manage to do Y.
User doesn't know how to do Y either.
User asks for help with Y.
Others (or Google) try to help user with Y, but are confused because Y seems like a strange problem to want to solve.
After much interaction and wasted time, it finally becomes clear that the user really wants help with X, and that Y wasn't even a suitable solution for X.

So to avoid this time-wasting process, make sure you know the very root cause of what you're trying to fix and what exactly you're trying to achieve. By doing this, we don't keep going in circles and have Google looking like this:

To help us further, Here are some types of questions we normally want to ask, and these are how they can be rephrased to give Google a better context of what your intent is.

1) Process questions: When you want to know how to do something or how something is done, you should mostly Begin with

How to (perform tasks)

Ways to (perform task)

Eg. “How to set up Android Studio on Mac”

2) Understanding questions: When you want to know how or why something exists or why one should take a particular action or decision, you mostly want to start your question with “why” or “what”.

For example, "Why use a Js framework?", “Why do I have a brain?”, “what makes the ocean blue?”

3) Comparison questions: To know the better of two or more options or the difference between them. In this case most times, use “vs”).

For example, “PHP vs JS”

“React vs Angular”

“Core i5 vs Core i7”

4) Explanation questions: To get full details about a particular topic.

For example, “All about programming”, “Explain SAAS”, etc

In conclusion, these methods do not apply to every situation, there are also a few cases where it is necessary to use questions and long texts to explain the situation. However, the purpose of this article is to help software developers quickly fix bugs or coding issues, which would usually take a lot of time, energy, and probably coffee too.

I hope this article has helped you gain insights into how Google works and how to make the best use of it when asking questions.

Till I come your way again!

Dealing with Legacy Code as an Engineer

Daniel Adetola — Fri, 02 Feb 2024 22:30:51 +0000

Joining a new development team or company can be really exciting, but what happens when you discover that the codebase you're inheriting is built on ancient frameworks and practices?

Don't fret! This article is your guide to navigating the challenges of working with legacy codebases, ensuring you can maintain, innovate and build on them without disrupting the delicate balance.

Leverage Version Control - Git

Protecting the codebase against unintentional mishaps is crucial. If one is not already in place, go with a stable version control system like Git. To effectively manage collaborative development and track changes, use Git. Make sure every modification has a complete record. Make use of insightful commit messages to make the goal and effects of each change clear.

Establish a well-defined branching plan to efficiently oversee feature creation, bug fixes, and releases. Provide instructions on how to create branches for experimenting with legacy code.
Mark important releases or milestones using the Tag feature in the version control system. It's an easy way to quickly find important points in the codebase's evolution.
Create dedicated branches for legacy code experimentation. Hence, You can ensure that your bold coding explorations won't disturb the tranquillity of the main codebase while you test and conveniently break some stuff 😂.

By implementing these best practices, you not only safeguard your codebase but also establish a disciplined and orderly setting for cooperative coding projects. When it comes to tracking changes, guaranteeing traceability, and encouraging a productive development process, version control proves to be invaluable. Also, regular merges keep everything harmonious. 👌🏽

Refactor with Caution

Refactoring is great, if you do it right. Use it to tidy up your code, making it more readable and maintainable. The key here is gradual change—small tweaks, followed by thorough testing. Rinse and repeat. This way, you can bring the codebase into the present without compromising its stability. When refactoring, make sure to test everything thoroughly and concentrate on small, gradual changes. To properly navigate this process, here are things you can do:

Build an extensive test suite that addresses edge cases, critical paths, and frequently used features.
Incorporate automated testing tools to help with regression testing and quickly find possible problems.

Integrate Contemporary Elements

The secret to a successful code modernization process is to strategically isolate outmoded components within your code. This entails a thorough analysis of the current codebase to determine which parts require updating. After being located, these antiquated parts are methodically swapped out for modern equivalents to make sure they work and integrate with the current codebase. It's like giving your code a makeover!💅 - a revitalization that keeps the essential functionality intact while slickly integrating contemporary components. The objective is to improve the codebase's overall efficiency and adaptability while adding shiny new features. Throughout this modernization, it is critical to remain careful to preserve the core functionality of the code.

Again, rigorous testing is required here in order to ensure that the incorporation of modern elements does not jeopardize the essence/functionality of the code, ensuring both innovation and reliability in the end.

Write Documentation

In the realm of legacy code, documentation is your beacon. Keep your documentation up to date in order to reduce the learning curve for others, and safeguard against potential errors. To accomplish this, consider the following practices:

Use comments in your code to explain complex logic or business rules. These comments serve as guideposts, helping developers navigate through complex code sections.
APIs and interfaces should be thoroughly documented to improve integration and understanding. Documentation here serves as a manual, clarifying the interactions between various system components.
Provide a high-level overview of the system's architecture and explain key design decisions. Here, it serves as a map, guiding developers through the codebase's overall structure. This could be in a README file or something similar.

By incorporating these documentation practices, you not only ease the comprehension of your teammates but also strengthen the codebase against the potential pitfalls of ambiguity, resulting in a more resilient and collaborative development process.

Plan strategically for New Features

Adding new features? Plan strategically, design the integration meticulously.

When you start adding new features to your software, it is critical to take a strategic approach and meticulous design to ensure a smooth and seamless transition.

Backward compatibility is a key principle to follow during this process. This means that new features should be introduced in a way that does not disrupt existing functionality. Consider it as adding a new thread to the intricate fabric of your current codebase. This includes:

Understanding the nuances of the existing system,
Identifying potential points of impact, and
Ensuring that the introduction of new elements does not jeopardize the stability of what is already in place.

This detailed and careful approach to planning and integration contributes to a harmonious blend of innovation within the existing code. It is not just about adding new features; it is about improving the system's capabilities while maintaining the reliability and integrity of the existing structure.

Conclusion

Maintaining and building on legacy code isn't just a challenge; it's an opportunity for innovation. Whether we like it or not, there's always going to be legacy code. Even the modern frameworks and patterns we use today are going to be considered in a couple of years - as old, legacy code. Thus, by strategically approaching the complexities, you can transform your legacy code into a robust foundation for future development. Happy Hacking!

Top 6 VSCode extensions for every Frontend Engineer

Daniel Adetola — Mon, 22 Jan 2024 13:02:55 +0000

Visual Studio Code (commonly known as VSCode) is unarguably one of the best IDEs for development. On top of that, It has so many extensions that can help speed up your work and give you a satisfying developer experience.

Here are the top 5 VSCode extensions that I use for my day-to-day frontend engineering:

ES7+ React/Redux/React-Native snippets

ES7+ snippets are like magic for developers. They are short, reusable code snippets created to make repeated coding declarations and statements easier in React, Redux, and React-Native.
For Javascript or React newbies, these snippets minimize the need to always retype basic Javascript code. They improve speed and consistency, but knowing the code is also very essential. Embrace these conveniences, personalize them, and transform your programming experience.

GitHub Copilot

GitHub Copilot transforms your coding experience by offering real-time AI ideas within your Integrated Development Environment (IDE). Whether you're starting to write code or explaining it in natural language, Copilot offers autocomplete-style ideas from an AI pair coder.
GitHub Copilot follows responsible standards, which ensure that your code samples are private and are not used as suggestions for other users.

GitHub Copilot makes use of OpenAI, which provides real-time coding assistance derived from billions of lines of open-source code.
Copilot supports any language, such as Java, PHP, Python, JavaScript, Ruby, Go, C#, or C++. It's also integrated into your editor and works quickly and effectively as you type.

Prettier - Code formatter

Maintaining consistent and visually appealing code in the coding world may be difficult many times. Prettier, your trusty code formatter, can help here. Prettier is a powerful tool that simplifies formatting, ensuring that your code is not only functional but also visually appealing.
Prettier examines your code and formats it according to established standards. Prettier supports a wide range of languages, including JavaScript, TypeScript, HTML, CSS, and more. It parses and rewrites your code in a consistent and visually pleasing manner.

In the ever-changing world of software development, Prettier is a shining example of simplicity and beauty. Prettier is your code formatting go-to, adding harmony and elegance to your work.

Live Server

Beginning web development frequently entails a loop of writing code, saving files, and then refreshing the browser to view changes. Enter Live Server, a game-changing solution that helps to speed this procedure. Live Server spins up a local development server that instantly updates your web page anytime you make changes, resulting in a dynamic and efficient development experience.

In the fast-paced world of web development, Live Server emerges as an invaluable tool, providing real-time updates to changes in your code changes instantly. Embrace Live Server's efficiency and simplicity to speed up your online development journey.

Docker

Docker is a groundbreaking technology in software development, altering how programs are produced, deployed, and run. Docker allows developers to construct and deploy programs in lightweight, portable containers, assuring consistency and efficiency across several settings.

Docker has quickly become an essential tool in modern software development, allowing developers to create, ship, and execute programs effectively. Add Docker to your VSCode toolkit and benefit from the agility and consistency it delivers to your development workflow.

Path Intellisense

Navigating file paths in a project can be time-consuming, but Path Intellisense makes the process easier. Path Intellisense is a VS Code addon that improves the coding experience by generating intelligent suggestions for file paths, making file referencing and inclusion easier.

Path Intellisense streamlines file path navigation, ensuring that files are referenced correctly and efficiently inside your applications.

In conclusion, We've seen how each tool helps to navigate and speed up the various areas of the development process. With these extensions at your disposal, you'll be a lot more productive and have a superb development experience. Leverage the power of these VSCode extensions, customize them to your taste and watch your productivity skyrocket.

Happy hacking!

Leveraging the Loading UI in Next.js App Router

Daniel Adetola — Tue, 16 Jan 2024 03:21:21 +0000

Lately, I've been diving deep into the new feature releases that came with Next.js 13 and 14. The latest version - Next 14, was released on the 26th of October 2023 and came with a couple of new features such as Turbopack and Server Actions along with new features like the disruptive App router and new data fetching methods.

Many of us old-time Next.js users probably haven’t started exploring the new Next.js features (or haven't started needing to). However, I’ve been quite intrigued by the new releases and what they claim to offer, and one of them is the Instant Loading State feature that enables you to pre-render a loading UI in a particular section of the page where data is still being fetched inside the server.

In case the last sentence sounds like gibberish, let me give an example; Let's say we have a blog post page that is being server-side-rendered. The page has a Navbar, Menubar, Footer, The PostDetails and finally, the Comments section.

Now there are two things we would want to achieve:

We want to fetch the comments data during the server-side rendering, but,
We don't want to delay the display of other static pages like the Navbar, Menubar, Footer and the PostDetails while waiting for the data in the Comments component to get fetched.

So what does Next.js do in this case? It temporarily replaces that comments component with a fallback UI to be shown in the browser while fetching the data needed for the comments section in the background (server). This concept probably already reminds you of something similar... yes you're right, the React Suspense!

In fact, the only difference is that Next.js' Loading state runs its suspense on the server, as opposed to the basic React Suspense which we usually only run on the client side.

So in our server, we have something like this:

The backbone mechanism behind this ability is something known as Streaming.

When you hear Streaming, you probably instantly think of YouTube or Netflix. Well, it’s not exactly that, but I promise it’s a little bit close!

Streaming is the mechanism that bridges the gap between fetching data from the server and loading pages quickly from the server side.

To explain this concept better, let's take a look at what happens under the hood during Client-side rendering (CSR) and Server-side rendering (SSR).

In Client-side rendering: React sends the HTML, CSS and Javascript to the browser through a script tag, and then the browser builds out the page and hydrates the page with the javascript. Then, the page becomes interactive.

You can see here that all the users see is a blank screen up until the entire page is loaded and it becomes interactive. Data fetching can only occur after this is complete.

In Server-side rendering: React (or in our case, Next.js) generates and builds out (renders) the HTML and CSS into a page on the server, and then sends that page to the browser. Similar to CSR, Javascript is also sent along and hydrates the page and makes it interactive.

A key advantage of SSR over CSR is that it allows data fetching to be done on the server and sent along with the page, hence, reducing the number of API calls to be made on the client. However, the user still sees a blank screen up until the page is displayed, and even after it is displayed, it still needs to wait for it to be completely hydrated before it becomes interactive. The wait takes longer, in fact, if data fetching needs to be done before the page is displayed. So the bigger the number or size of API calls on the server, the longer it takes before the page becomes fully interactive.

Problem statement: The user still sees a blank screen up until the page is displayed, and even after it is displayed, it still needs to wait for it to be completely hydrated before it becomes interactive.

So how do we solve this? What we need is a way to

Keep hidden only the parts that aren't ready to be displayed (ie. that are still being fetched) or replace them with a fallback loading UI, and;
Show the parts of the page that are ready to be displayed and do not require extra data fetching, eg, the menubar, navbar, footer etc, and make them interactive.

This is where the process of streaming comes in to save the day!

Streaming is the process where React uses its component to isolate a “data-fetch required component” and allow other parts of the page to be loaded asynchronously/simultaneously and become interactive, and also, show a temporary loading interface while waiting for the “data-fetch required component” to finishing fetching data.

Take a look at this: Assuming we had our component structure like this:

Let us imagine that the data fetching only occurs on the Comments component.

Pre-streaming, the interactivity of the entire page and all its components will be deferred until the data fetching (that happens only in that comment section) is completed.

Here’s how Streaming suspends (pun intended, lol) that issue:

By using <Suspense/> with react, our page flow now looks like this:

Sweet right? Super optimized too! Now the user doesn't need to feel like they’re waiting for anything at all because we’ve told React that it shouldn’t block the rest of the page from streaming—and, as it turns out, from hydrating, too! This means we no longer have to wait for all the code to load to start hydrating. React can hydrate parts as they’re being loaded.

Thanks to Selective Hydration and the advent of Server components, a heavy piece of JS doesn’t prevent the rest of the page from becoming interactive. So you can click around on the Menubar or the Navbar or footer while the comments are being fetched in the server.

Here’s how the render flow looks before and after, as described by Next.js

Before:

After:

Now to the fun part!

To take advantage of this powerful feature in your Next.js App Router, all you need to do is create a loading.tsx (I'm using typescript, it can be .jsx in your case) at the same file level as your page.tsx where the data fetching is going to happen, so something like this:

You can see that the page.tsx and the loading.tsx in the posts/[postId] folder are on the same level, this lets Next.js know to automatically use that loading component as a fallback UI in the case of any server-side data fetching in its corresponding page.tsx.

For now, let's have a simple text that says "Loading..." in our loading.tsx file:

Now let's fetch some data in our [postId]/page.tsx so we can test if this loading component works;

Easy as that! Now the getCommentsData will get called on the server whenever a route like posts/1 or posts/abc is visited, and you'll see the result of the console.log(data) as an array of objects, each containing the name, id, text, and email of the comment.

Next, let's map the comments data into a list on our page, so our complete [postId]/page.tsx looks like this:

Now let's check this out on our browser! When we hit the /posts/[postId] route (eg. say localhost:3000/posts/1), we should see something like this:

Sweet! We now see that the rendering of the layout components (like the navbar in this example) is not delayed by the data fetching in the Comments component. The navbar is rendered immediately and a fallback is provided for the fetching of the comments, and once the comments are fetched, they are displayed on the screen. Beautiful stuff 🚀

NB: You might not notice the loading UI for very long if you're on a good network speed - you might mostly just see a flash of the loading screen, but once you throttle to a slower network, you should be able to see it for longer

We now understand the principle of Streaming in React and how to effectively leverage it in Next.js by creating Loading pages in our App Router to make our websites and web apps as quick and responsive as possible.

And that's it! Till I come your way again guys, Happy Hacking!

https://react.dev/reference/react/Suspense#suspense

https://github.com/reactwg/react-18/discussions/37

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states

https://github.com/reactwg/react-18/discussions/22

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Setting up your CMS' with Gatsby - PART 1: Contentful

Daniel Adetola — Thu, 02 Jun 2022 19:52:03 +0000

Hi there!

In this article (and some others to come), We're gonna be going through how to set up some of your popular CMS platforms directly with Gatsby. It's going to be more like a series, so this first episode is going to be on Contentful.

Let's Dive into it!!!

So whether you're a newbie in web dev, or you're a seasoned engineer, you've probably already heard about Content Management Systems (CMS). Names like Contentful, Sanity, Prismic, Strapi, Netlify ...and WordPress are names that easily come to mind when you hear about CMS'.
At this point, you might probably be thinking, WordPress?

I know, I know, WordPress? Although it sounds much more different from the others, it's actually also a CMS. The difference between platforms like WordPress, Wix, etc., and others like Contentful or Netlify is that the latter are known as Headless CMS. ie. they manage only the content strictly, while the former - Traditional CMS' handle the frontend along with the content it provides. You can read more about that here

Now that we know what our CMS is, what better framework to integrate it with than Gatsby?

Gatsby provides methods to easily fetch CMS content using their GraphQL API, and use the content to create pages during build time.

It also handles SEO quite well, has great developer experience and it's powered by our favorite framework - React!

Getting started

The first thing we need to do is to create a Contentful account. (duh!) Once we can access the dashboard, the next thing we do is to create a Content Model. If you're just creating an account for the first time, you should see something like this:

Now we can create the Content Model, which I'll call Blog Post, and it's going to look like this:

Once this is set up, we can go ahead to create the Blog Post content from the "Content" tab on the dashboard navbar. Now, cross over to Gatsby and set things up over there too.

Time to write some code!

We can easily get started with the gatsby project by running npm init gatsby which will provide us with the basic structure we'll need to get our gatsby project up and running. It's okay if you already have your gatsby app, just skip that part and keep reading.

Now that our gatsby project is ready to be worked on, we'll need to store important details from our contentful application that will enable us to link it to our gatsby app. We'll keep these as .env secrets.

What we're gonna do is to create a file named .env.development and it's gonna look like this

# .env.development
CONTENTFUL_SPACE_ID='xxxxxxxxxxxx'
CONTENTFUL_ACCESS_TOKEN='XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

To get our CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN, we need to go to Settings > API Keys where you should see something like this:

Click on the "Add API Key" button as shown on the top right of the screenshot above and scroll down a bit on the next page to see something like this:

Copy the value of the Space ID as our CONTENTFUL_SPACE_ID and the value of the Content Delivery API - access token as our CONTENTFUL_ACCESS_TOKEN.

NB: The values in the .env.development should be kept secret, and so, should not be committed to Git, so you would need to add the .env.development to your .gitignore (if it's not already automatically added)

That done? Let's go on to our gatsby-config.js and set up contentful there.
Basically, we should update the file to look like this:

// gatsby-config.js
require("dotenv").config({ // You might need to install dotenv
  path: `.env.${process.env.NODE_ENV}`,
})

const contentfulConfig = {
  spaceId: process.env.CONTENTFUL_SPACE_ID,
  accessToken:
    process.env.CONTENTFUL_ACCESS_TOKEN
}

const { spaceId, accessToken } = contentfulConfig

if (!spaceId || !accessToken) {
  throw new Error(
    "Contentful spaceId and the access token need to be provided."
  )
}

module.exports = {
  siteMetadata: {
    title: `...`,
    description: `....`,
    siteUrl: `...`,
  },
  plugins: [{
      resolve: "gatsby-source-contentful", // You'll need to install this too
      options: contentfulConfig,
    },
//... other optional plugins
],
}

At this point, you've successfully been able to connect Contentful to your gatsby app. What we basically did was pass in the spaceId and access token (that we stored in our .env file earlier) to the gatsby-source-contentful plugin so that contentful can create graphQL schemas from our blog content and allow us to fetch them when we need it.

Now let's try to fetch and list all our Blog Posts and render them on our pages/index.js page.

We can easily do something like this:

// src/pages/index.js
import { graphql } from "gatsby"
import React from "react"
import Layout from "components/Layout"
import SEO from "components/SEO"

const IndexPage = ({ data }) => {
  const posts = data.allContentfulBlogPost.nodes
  return (
  <Layout>
    <SEO title="Home" />
    <div>
    {posts.map((post)=>(
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>By {post.authorName}</p>
          <p>on {post.date}</p>
          <hr/>
        </div>
      ))}
    </div>
  </Layout>
)
};

export default IndexPage

export const pageQuery = graphql`
  query BlogIndexQuery {
    allContentfulBlogPost {
      nodes {
        id
        slug
        subtitle
        title
        description
        authorName
        captionText
        tags
        date(formatString: "DD MMMM YYYY")
        image {
          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
        }
        authorImage {
          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
        }
        body {
          raw
        }
      }
    }
  }
`

Awesome right? We can easily use graphql page query to fetch and list all the content we created in contentful.

But we're not done yet...

Almost though, The next thing we need to do now is to use our Blog Post contents to create pages so we can view each post on its own single page using the slug field. That's where the gatsby-node.js file comes in handy.

If you haven't created it yet, create a file named gatsby-node.js and add this to it:

//gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  // Define a template for blog post and tagPosts
  const blogPostPath = path.resolve("./src/templates/blog-post.jsx")

  // Fetch all contentful blog posts
  const result = await graphql(
    `
      {
        allContentfulBlogPost {
          nodes {
            title
            slug
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your Contentful posts`,
      result.errors
    )
    return
  }

  const posts = result.data.allContentfulBlogPost.nodes

  // Create blog posts pages
  // But only if there's at least one blog post found in Contentful
  // `context` is available in the template as a prop and as a variable in GraphQL
  if (posts.length > 0) {
    posts.forEach((post, index) => {
      createPage({
        path: `/${post.slug}/`,
        component: blogPostPath,
        context: {
          slug: post.slug
        },
      })
    })
  }

}

Here, we're using the createPages export to make a quick graphql call to fetch the contentful posts, each item in the array will contain the title and unique slug of the post (In this case, we're using the slug as the unique identifier, you might decide to use the id if you want).
Once we get the response from graphQL, we use the forEach method to loop through each post item and use it to create a page using the createPage function. We're passing the slug as a context parameter so we can use it to get the post we want to display with the blogPostPath template component.

But first, we need to create the post template component at "./src/templates/blog-post.jsx". This file is going to be used to fetch and display the specified blog post. It can look like this:

// src/templates/blog-post.jsx
import React from "react"
import { graphql } from "gatsby"
import Layout from "components/Layout"
import SEO from "components/SEO"
import { GatsbyImage } from "gatsby-plugin-image"
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"

function BlogPostTemplate({ data }) {
  const post = data.contentfulBlogPost;

  return (
    <Layout>
      <SEO
        title={post.title}
        description={post.description}
        image={post.image?.url}
      />
      <h1>{post.title}</h1>
      <caption>{post.captionText}</caption>
      <p>By {post.authorName} on {post.date}</p>

      <GatsbyImage
          alt="post image"
          image={post.image.gatsbyImageData}
        />

        <div>{documentToReactComponents(JSON.parse(post.body.raw))}</div>
    <hr />

    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug(
    $slug: String!
  ) {
    contentfulBlogPost(slug: { eq: $slug }) {
      id
      slug
      subtitle
      title
      authorName
      description
      captionText
      tags
      date(formatString: "MMMM Do, YYYY")
      image {
        url
        gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
      }
      authorImage {
        gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
      }
      body {
        raw
        references {
          contentful_id
          url
          title
          width
          height
          description
        }
      }
    }
  }
`

Here, we're querying our post by finding the post whose slug matches the slug that comes with the page's content. So if our URL looks like "https://localhost:8000/what-is-up", we are going to find the post whose slug is "what-is-up" and return the details of the post (or return a 404 if we can't find such a post).

Wrapping it up

We've been able to set up our contentful dashboard, connect it to gatsby, fetch and list all the content we created in contentful using the graphql schema that gatsby-source-contentful provides, and we've also been able to create pages during build time from posts in contentful. I hope that you've picked up a thing or two and you can now confidently start using Contentful in your Gatsby applications.

Note that I didn't go into the styling of the UI in order to keep this article streamlined to the purpose of integrating Contentful with Gatsby. However, In your app, you'd definitely want to make the site a bit more beautiful.

Well, that's all for now. Drop a like or a reaction if you enjoyed this read. Feel free to let me know in the comments if you have any questions, observations, or suggestions.
Also, watch out for subsequent articles where I'll be showing how we can integrate gatsby with other CMS platforms easily.

Till I come your way again, have fun, and happy hacking! 🚀