npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-drupal-preview

v0.2.2

Published

A plugin to parse json data from Drupal preview api endpoint.

Downloads

5

Readme

Contains helper function to convert Drupal Json data into Gatsby Node object.

Quick start

To get started creating a new plugin, you can follow these steps:

  1. Install and configure the Simple Decoupled Preview module on your Drupal site.

If you already have a Gatsby site, you can use it. Otherwise, you can create a new Gatsby site to test your plugin.

  1. Install this plugin in your Gatsby site.

npm install gatsby-drupal-preview

  1. In your pages directory of your Gatsby site, create a new page using the file system route api pattern to accept parameters.

Your new page will look similar to this:

/my-gatsby-site
├── gatsby-config.js
└── /src
    └── /pages
        └── /preview
            └──[...].jsx
  1. This page url is what the Drupal iframe is going to link to including parameters to assist you with serving the proper Page template and making api request to your Drupal site to fetch the Json.

An example iframe url will be composed as in this example:

https://www.mygatsbysite.com/preview/{bundle}/{uuid}/{langcode}/{uid}

How to use the parameters:

  • {bundle} - This is the node type of the preview node. Use this to determine which template on your Gatsby site to pass the data to.
  • {uuid} - This is the UUID property of the preview node.
  • {langcode} - This is the language code of the preview node.
  • {uid} - This is the ID of the user that triggered the preview in Drupal.

An actual iframe url example that depicts these parameters:

http://localhost:8000/preview/page/ed8145e8-33c4-4497-b4e0-c441f1ad3079/en/1

How to use the plugin

In your Preview page template, import the helper function from this plugin.

import {createNodeFromPreview} from "gatsby-plugin-preview"

Import your page templates. Example:

import ArticleTemplate from "../../templates/article"
import PageTemplate from "../../templates/page"

Alternatively, you can lazyload the templates and create a helper function to return the desired template.

const pageTemplates = {
  page: React.lazy(() => import("../../templates/page")),
  article: React.lazy(() => import("../../templates/article"))
}

// Helper function.
const getTemplate = (bundle, data) => {
  if (pageTemplates.hasOwnProperty(bundle)) {
    const PreviewTemplate = pageTemplates[bundle]
    return (
      <React.Suspense fallback={<>Loading ${bundle} template...</>}>
        <PreviewTemplate data={data}/>
      </React.Suspense>
    )
  }
  return null;
}

Example Fetching the data with Axios from Drupal

This is only an example to get you started. Your exact implementation could be entirely different.

const PreviewPage = ({...props}) => {
  const [state, setState] = React.useState({
    data: undefined,
    error: null,
    loaded: false,
  });

  const { data, error, loaded } = state;

  const splat = props.params[`*`]?.split('/') || []
  const [bundle, uuid, langcode, uid] = splat
  // We need to define the baseUrl for images.
  const baseUrl = process.env.GATSBY_BASE_URL || ''

  React.useEffect(() => {
    async function fetchData() {
      try {
        const endpoint = `${process.env.GATSBY_BASE_URL}/api/preview/${uuid}`;
        const response = await axios.get(endpoint, {
          headers: {
            "api-key": process.env.GATSBY_API_KEY || "",
          },
          params: {
            langcode,
            uid,
          },
        });
        setState({ data: createNodeFromPreview(response.data, baseUrl), error: null, loaded: true });
      } catch (e) {
        setState({ data: undefined, error: e.message, loaded: true });
      }
    }
    fetchData();
  }, [uuid, langcode]);

  if (error || !loaded) {
    // Return something else in case of error and while data is fetching.
  }
  if (data) {
    return getTemplate(bundle, data)
  }
  return null
}

export default PreviewPage

About Helper Function

Note: The createNodeFromPreview(data, baseUrl, nodeAlias) function arguments:

  1. data - REQUIRED - This is the data object received from api response.
  2. baseUrl - REQUIRED(for images) - This is used to programmatically create a PublicUrl property pointing to the files on your Drupal site.
  3. nodeAlias - OPTIONAL - If you've aliased your graphql nodes like in this example, you can pass the alias in through the function. Otherwise, the function will create camelCase name consistent with Gatsby's handling of GraphQL.
export const query = graphql`
  query($id: String!) {
    node: nodeArticle (id: {eq: $id}) {
      title
      langcode
      body {
        processed
      }
    }
  }
`