@epicdesignlabs/gatsby-source-optimizely

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

Features

• Support for multiple optimizely/episerver API versions
• Support for multiple, additional custom headers
• Support for custom request timeout in all optimizely/episerver API requests
• Support for data caching on subsequent gatsby source plugin runs
• Support for throttling and debouncing optimizely/episerver API requests
• Add support for expanded data on some content blocks: images, dynamicStyles, items, form key fields are currently supported with more to come in the future

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: {
					OptimizelyAboutUsDesignersPageContentChildren: "/v2.0/content/14675/children?expand=*",
					OptimizelyAboutUsPageContentChildren: "/v2.0/content/14110/children?expand=*",
					OptimizelyBedAccessoriesHeadboardsPageContentChildren: "/v2.0/content/14129/children?expand=*",
					OptimizelyBedAccessoriesLegsPageContentChildren: "/v2.0/content/14131/children?expand=*",
				},
			},
		},
	],
};

Configuration Options

Endpoints

Add a single or multiple endpoints.

options: {
	// ...

	endpoints: {
		// Single endpoint
		OptimizelyAboutUsDesignersPageContentChildren: "/v2.0/content/14675/children?expand=*",

		// Multiple endpoints
		OptimizelyAboutUsPageContentChildren: "/v2.0/content/14110/children?expand=*",
		OptimizelyBedAccessoriesHeadboardsPageContentChildren: "/v2.0/content/14129/children?expand=*",
		OptimizelyBedAccessoriesLegsPageContentChildren: "/v2.0/content/14131/children?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"
		}
	}
}

Request Timeout

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

Default: 120000 (120 seconds).

options: {
	// ...

	request_timeout: 120000;
}

Request Throttling

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

Default: 3000.

options: {
	// ...

	request_throttle_interval: 3000;
}

Request Debouncing

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

Default: 3000.

options: {
	// ...

	request_debounce_interval: 3000;
}

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: {
		OptimizelyAboutUsDesignersPageContentChildren: "/v2.0/content/14675/children?expand=*",
	}
}

you can query the data as follows:

{
	allOptimizelyAboutUsDesignersPageContentChildren(filter: { status: { eq: "Published" } }) {
		edges {
			node {
				id
				name
				contentLink {
					id
					url
				}
				contentType
				language {
					displayName
					link
					name
				}
				status
				contentBlocks {
					displayOption
					contentLink {
						expanded {
							body
							column1Body
							column1PrimaryCTA {
								text
								target
								title
								url
							}
							column1SecondaryCTA {
								target
								text
								title
								url
							}
							column2PrimaryCTA {
								target
								text
								title
								url
							}
							column2SecondaryCTA {
								target
								text
								title
								url
							}
							contentLink {
								id
							}
							contentType
							disableImageZoom
							dynamicStyles {
								contentLink {
									id
								}
								themeColor
							}
							eyeBrow
							heading
							headingH1
							items {
								contentLink {
									id
								}
								body
								contentType
								eyeBrow
								heading
								image {
									id
									url
									expanded {
										contentLink {
											id
											url
										}
										contentType
										height
										name
										status
										url
										width
										size
									}
								}
								link {
									target
									text
									title
									url
								}
								name
								status
								parentLink {
									id
									url
								}
							}
							language {
								displayName
								name
							}
							layout
							primaryCTA {
								text
								url
								title
								target
							}
							secondaryCTA {
								target
								text
								title
								url
							}
							status
							style
							textPosition
							textPosition2
							image1 {
								id
								url
							}
						}
					}
				}
			}
		}
	}
}

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