gatsby-directus

A Gatsby source plugin for Directus.

Features

This plugin converts your Directus content schema into Gatsby nodes. Allowing you to use your data in Directus to build out your static sites.

• Converts image columns into image sharp compatible gatsby nodes

- requires gatsby-image
- requires gatsby-plugin-sharp
- requires gatsby-transformer-sharp
- if these plugins aren't available, no image processing will be done

• Converts markdown columns into markdown compatible gatsby nodes
• Recursively builds child nodes for relational data.

- Many to One relations
- Many to Many relations

• Properly handles toggle ui elements from gatsby to transform them into boolean values

Installation

npm install --save gatsby-directus

Configuration

Add gatsby-directus to the plugins in gatsby-config.js
Example:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-directus`,
      options: {
        url: `https://api.mydirectusdomain.com`,
        accessToken: `AKDJFKDJ@#@#@`,
        advancedImageProcessingEnabled: false 
      }
    },
    'gatsby-plugin-react-helmet'
  ],
};

Image Processing

This plugin processes directus images into image sharp compatible nodes as long as gatsby-image is installed, however, you may get issues if you don't have gatsby-plugin-sharp and gatsby-transformer-sharp installed as well.
It does this by downloading the images into .cache/directus.
npm install --save gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp
Additionally, in order to transform gatsby image nodes we need to pass in an option to gatsby-directus telling it to include those transformers.
Example Config:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-directus`,
      options: {
        url: `https://api.mydirectusdomain.com`,
        accessToken: `AKDJFKDJ@#@#@`,
        advancedImageProcessingEnabled: true
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-react-helmet'
  ],
};