See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub

@epicdesignlabs/gatsby-source-optimizely

This unofficial source plugin makes Optimizely/Episerver API data available in GatsbyJS sites. Currently in active development.

Commitizen friendly GitHub npm GitHub issues GitHub closed issues GitHub pull requests GitHub closed pull requests GitHub contributors GitHub package.json version GitHub commit activity npms.io (final) npms.io (final)

Features

  • Support for multiple optimizely/episerver API versions
  • Log level options for optimizely/episerver API endpoint requests: info, debug, warn, error
  • Support for additional headers
  • Support for custom request timeout in all optimizely/episerver API requests

Installation and Setup

For npm:

npm install @epicdesignlabs/gatsby-source-optimizely

For yarn:

yarn add @epicdesignlabs/gatsby-source-optimizely

Setup this plugin in gatsby-config.js as follows (*required fields):

module.exports = {
	// ...

	plugins: [
		// ...

		{
			resolve: "@epicdesignlabs/gatsby-source-optimizely",
			options: {
				auth: {
					site_url: process.env.OPTMIZELY_API_SITE_URL // The URL of the Optimizely/Episerver API site,
					username: process.env.OPTMIZELY_API_USERNAME // The username of the Optimizely/Episerver API user.,
					password: process.env.OPTMIZELY_API_PASSWORD // The password of the Optimizely/Episerver API user.,
					grant_type: process.env.OPTMIZELY_API_GRANT_TYPE, // // The grant type of the Optimizely/Episerver API user. Default is "password"
					client_id: process.env.OPTMIZELY_API_CLIENT_ID, // The client ID of the Optimizely/Episerver API user. Default is "Default"
				},
				endpoints: {
					OptimizelySites: "/v2.0/site",
				},
			},
		},
	],
};

Configuration Options

Endpoints

Add a single or multiple endpoints.

options: {
	// ...

	endpoints: {
		// Single endpoint
		OptimizelySites: "/v2.0/site",

		// Multiple endpoints
		OptimizelyContent: "/v2.0/content/994?expand=*",
		OptimizelyContent: "/v2.0/content/994/children?expand=*",
		OptimizelySearchContent: "/v2.0/search/content?expand=*",
	}
}

Additional Headers

Add additional headers to the request as follows:

options: {
	// ...

	auth: {
		headers: {
			// Single header
			"X-Custom-Header": "Custom Value",

			// Mutiple headers
			"Access-Control-Allow-Headers": "Custom Value",
			"Access-Control-Allow-Credentials": "Custom Value",
			"Access-Control-Allow-Origin": "Custom Value",
			"Access-Control-Allow-Methods": "Custom Value"
		}
	}
}

Log Level

Set the log level for the Optimizely/Episerver API API requests. Supports info, debug, warn, error.

Default: info.

options: {
	// ...

	log_level: "info";
}

Request Timeout

Set a custom request timeout for the Optimizely/Episerver API requests (in milliseconds).

Default: 0.

options: {
	// ...

	request_timeout: 0;
}

How to Query

Assuming you correctly setup the plugin in gatsby-config.js and you have a OptimizelyContent node name and its valid endpoint:

options: {
	// ...

	endpoints: {
		OptimizelyContent: "/v2.0/content/994?expand=*";
	}
}

you can query the data as follows:

{
	allOptimizelyContent(limit: 1) {
		edges {
			node {
				contentBlocks {
					contentLink {
						id
						expanded {
							anchor1
							subHeading
							name
							altText1
							autoCrop
							body
							column1Body
							column1PrimaryCTA {
								target
								text
								title
								url
							}
							column1SecondaryCTA {
								target
								text
								title
								url
							}
							column2PrimaryCTA {
								target
								text
								title
								url
							}
							column2SecondaryCTA {
								target
								text
								title
								url
							}
							contentType
							disableImageZoom
							displayFilter

							eyeBrow
							fourColumnDisplay
							fullBleed
							heading
							headingH1
							height
							image {
								url
								guidValue
								id
								workId
							}
							image1 {
								guidValue
								id
								url
								workId
							}
							imageRatio
							images {
								displayOption
							}
							items {
								displayOption
							}
							layout
							link {
								target
								text
								title
								url
							}
							logo {
								guidValue
								id
								url
								workId
							}
							logoAltText
							maxCount
							mediaTextColor
							noAutoPlay
							orientation
							parentPage {
								guidValue
								id
								url
								workId
							}
							primaryCTA {
								target
								text
								title
								url
							}
							recurse
							secondaryCTA {
								target
								text
								title
								url
							}
							style
							textAlign
							textPosition
							textPosition2
							themeColor
							useEpiSort
							usePrimaryLinkStyle
							video1 {
								guidValue
								id
								url
								workId
							}
						}
						guidValue
						workId
					}
					displayOption
				}
				metaDescription
				metaTitle
			}
		}
	}
}

Contributing

Please feel free to contribute! PRs are always welcome.

License

This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

Author

Epic Design Labs

License

Released under the MIT license.

© 2022 Gatsby, Inc.