External content for GatsbyJS

Let's build a static website with external content.
In this post I will show you how you can static-render data from any data source with GatsbyJS.

GatsbyJS

If you enjoy React and want a standard-compliant and high performance web, you should look at GatsbyJS.

What does it do?

It will compile your React code into a collection of static HTML files.

Why should you care?

1. Maximum performance - when a user looks at your web, no code is run client or server side!
2. Fastest images - progressive loading of images in the right resolution for the user's device.
3. SEO - static HTML is google (robots) friendly. Slow websites are penalized by google search!
4. React - productive front end development.
5. Typescript - catch errors, before your users see them (optional, but highly recommended)!
6. Content - connect and use many content sources out-of-the-box or add your own!

Gatsby JS Content

GatsbyJS represents content as a tree of nodes. A node can be an image a block of text.
For example a blog post is a collection of text and image nodes.

You can create nodes by hand in your gatsby-node.js file. But there are easier ways.

Plugins

Nodes are created by plugins. Which plugin you need, depends on the CMS of your choice.
The most straightforward option is the filesystem plugin, which turns files into nodes.
To find the right plugin for you take a look here

Plugin not found

If you have a data source that is not covered by the existing plugins, let's build our own.

The process is fairly straigthforward, the only complex part are images.

Loading nodes

Create the gatsby-node.ts (or js) file in your gatsby project root folder.

Add this code to get started. The sourceNodes method is called automatically when gatsby project is build.

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

Now let's fetch our data. Here I use https://inuko.net app platform, but the process is similar for any source.

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

And let's also fetch images we will need.

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

We now have a list of (blog) posts and a list of images (links).
In this example we have a simple structure where each post has some text content and an id of a single image.

The next step is to convert the data we got from our server to data that gatsby can use.
Data in gatsby is represented by *node*s, so let's look at how to convert our server data into a node.

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

We iterate over all posts and create a corresponding node for each.
If a post has an image post.image_id we also create an remoteFileNode node and
append it to the post node
post.mediaFile___NODE = fileNode.id

Important note: gatsby will automatically create image nodes from our file nodes, but it needs a way to detect it is an image.
If your urls contain file extensions or your server will reply with an image content type, you are all set.
If that is not the case, you can set an explicit extension on the file node (png, jpg) to trigger image node creation.
ext: name.substring(name.lastIndexOf("."))

Image nodes

Maybe you are wondering why we go to such trouble of loading images as nodes. We could just use the image urls directly.
Well sometimes the images might be behind an authenticated service for example.
But the real reason is we want to use the fantastic image plugin that gatsby provides.
It will automatically convert the images into the best format and size for any device that will look at our web.
This means the images will load faster and will look better (and get a better score by google:).

Consuming nodes in pages

We are now ready to consume the nodes we've created.
There are many ways in which you can do this, for this example we will a few posts and render them on a features page.

First we need to load the data nodes we are interested in. We will use the useStaticQuery.
Then we will pass the data to our reusable component called SectionGrid that will render all loaded posts.

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return <sectiongrid data="{data}" title="{<h1">Features} />
}
</sectiongrid>

Render time!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return <div classname="sectionGrid">
        <div classname="hero">
            {props.title}
        </div>
        {edges.map(edge => {
            const node = edge.node;
            return <div classname="section">
                <div>
                    <gatsbyimage image="{node.mediaFile.childImageSharp.gatsbyImageData}" alt="{edge.name}"></gatsbyimage>
                </div>
                <div classname="sectionText">
                    <h2 id="node-title">{node.title}</h2>
                    <div>{node.content}</div>
                </div>
            </div>
        })}
    </div>
}

This component will iterate over all nodes we got from out query. And it will render two divs one for the post image and one for the text content.

That's a wrap

Building a great looking and performant website has never been easier.
Tools like Gatsbyjs (and its plugins) will do most of the heavy lifting for us.
Thus we can dedicate 100% of our time to content and design.

I hope that armed with this post, you'll be able to further automate your workflow.
Now you can bring your product catalog, knowledge base or other valuable content to your website.
Without copy-pasta and with fully automated image processing.

Happy hacking!

The above is the detailed content of External content for GatsbyJS. For more information, please follow other related articles on the PHP Chinese website!