Gatsby Source Directus

screenshot of Gatsby Source Directus
gatsby
directus

Source plugin for pulling data into Gatsby from a Directus API.

Overview:

The gatsby-source-directus is a source plugin that allows users to pull data from a Directus API into the Gatsby GraphQL Data Layer. It provides a convenient way to access and query data from a Directus instance within a Gatsby project.

Features:

  • Pulls data from a Directus API into the Gatsby GraphQL Data Layer
  • Supports both gatsby@4 and gatsby@5 versions
  • Provides options for authentication and access to non-public content
  • Allows customization of GraphQL type and field names for user-defined collections and Directus-defined collections
  • Offers options for development environments, including refreshing the schema and configuring image download concurrency

For Gatsby 4:

npm install gatsby-source-directus@4

For Gatsby 5:

npm install gatsby-source-directus@5

Add the package to your gatsby-config.js file in your Gatsby project:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-directus",
      options: {
        url: "https://your-directus-api-url.com",
        // other configuration options
      },
    },
  ],
};

Summary:

The gatsby-source-directus plugin is a useful tool for integrating Directus API data into a Gatsby project. With its support for both gatsby@4 and gatsby@5 versions, authentication options, customizable GraphQL type and field names, and development environment configurations, it provides flexibility and convenience for developers working with Gatsby and Directus.

gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

directus
Directus

A website that uses Directus as an open source headless CMS to manage content. This includes features such as a customizable content model, role-based access control, and API-based content delivery to support a wide range of digital experiences.

Recoil

Recoil is a state management library for React that provides an intuitive and flexible API for managing and sharing state across components. It supports a range of features, including derived state, asynchronous updates, and time-travel debugging, and is designed to work well with the React ecosystem and other state management solutions.