Universal Data Layer
Using Plugins

Plugin Overview

Extend UDL with plugins to connect to your data sources

What Are Plugins?

Plugins extend Universal Data Layer by connecting to external data sources like Contentful, Shopify, or your own APIs. Each plugin:

  • Fetches data from its source
  • Creates GraphQL nodes in the UDL schema
  • Handles caching and data transformation

Available Official Plugins

PluginDescriptionPackage
ContentfulSource content from Contentful CMS@universal-data-layer/plugin-source-contentful

Installing Plugins

Install plugins from npm:

Terminal
npm install @universal-data-layer/plugin-source-contentful

Registering Plugins

Register plugins in your udl.config.ts file. Use the defineConfig helper for TypeScript support:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: [
    {
      name: '@universal-data-layer/plugin-source-contentful',
      options: {
        spaceId: process.env['CONTENTFUL_SPACE_ID'],
        accessToken: process.env['CONTENTFUL_ACCESS_TOKEN'],
        environment: 'master',
      },
    },
  ],
});

Registration Methods

String Shorthand

For plugins with no configuration:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: ['my-simple-plugin'],
});

Object with Options

Pass configuration to the plugin:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: [
    {
      name: '@universal-data-layer/plugin-source-contentful',
      options: {
        spaceId: 'your-space-id',
        accessToken: 'your-token',
      },
    },
  ],
});

Local File Path

Use a local plugin during development:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: [
    './plugins/my-local-plugin',
    {
      name: './plugins/my-configured-plugin',
      options: {
        customSetting: 'value',
      },
    },
  ],
});

Environment Variables

Store sensitive credentials in environment variables:

.env
CONTENTFUL_SPACE_ID=your-space-id
CONTENTFUL_ACCESS_TOKEN=your-access-token
CONTENTFUL_ENVIRONMENT=master
udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: [
    {
      name: '@universal-data-layer/plugin-source-contentful',
      options: {
        spaceId: process.env['CONTENTFUL_SPACE_ID'],
        accessToken: process.env['CONTENTFUL_ACCESS_TOKEN'],
        environment: process.env['CONTENTFUL_ENVIRONMENT'] || 'master',
      },
    },
  ],
});

Plugin Loading Order

Plugins load in the order they appear in the array:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

export const config = defineConfig({
  plugins: [
    'plugin-one',   // Loads first
    'plugin-two',   // Loads second
    'plugin-three', // Loads third
  ],
});

This matters when plugins depend on each other.

Conditional Loading

Load plugins based on environment:

udl.config.ts
import { defineConfig } from 'universal-data-layer';

const isDev = process.env['NODE_ENV'] === 'development';

export const config = defineConfig({
  plugins: [
    '@universal-data-layer/plugin-source-contentful',
    ...(isDev ? ['./plugins/dev-logger'] : []),
  ],
});

Next Steps

Exploring GraphQL

Learn GraphQL basics using UDL's built-in GraphiQL interface

Contentful

Source content from Contentful CMS