Dustin Schau DSchau

Instructions

Check out the caching repo
Push to Gatsby Cloud
First build will log "Cache not persisted, getting new characters"
Subsequent builds will not
- Can validate with a builds webhook invocation: curl -X POST https://webhook.gatsbyjs.com/hooks/data_source/publish/0f86ced9-2fa3-4738-80d8-23786226a8f3

Note: there are several conditions in which the cache is (automatically) cleared. They are documented in the cache API docs.

Gatsby and Cypress can be used together seamlessly (and should be!). [Cypress][cypress] enables you to run end-to-end tests on your client-side application, which is what Gatsby produces.

First, we'll want to install Cypress and additional dependencies.

	#!/bin/bash
	find . \( -name '.JPG' -o -name '.jpg' \) -size +10kb \| while read f
	do
	filename="optimized/$(echo $f \| sed "s/\.\///g")"
	echo "$filename"
	convert "$f" -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG "$filename"
	done

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no"
	/>
	<style id="typography.js">

	module.exports = {
	siteMetadata: {
	title: 'Drupal + Bayer Starter',
	description: 'Official boilerplate for getting up and running with Drupal + Gatsby for the Bayer team'
	},
	plugins: [
	{
	resolve: 'gatsby-source-drupal',
	options: {
	baseUrl: 'https://path-to-drupal.com'

	<pingdom_http_custom_check>
	<status>200</status>
	<response_time>10000</response_time>
	</pingdom_http_custom_check>

	import React from 'react'
	import imgSrc from './assets/whatever.png'

	export default () => (
	<div>
	<h1>Look below! A static image</h1>
	<img src={imgSrc} /> {/* I'm a plain ol' static image */}
	</div>
	)

	// make sure you wrap this in a useEffect, componentDidMount, etc.
	const safeFetch = (timeout = 10000) => {
	return (...args) => {
	// this is sorta "unsafe" in the sense that a slow connection could cause this timeout
	// a safer way would be to tap into and investigate error codes for e.g. ad blocked resources
	// but this gets the idea across
	return Promise.race([
	fetch(...args),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('Ad blocked or something')), timeout) // this failed, short-circuit
	])

	// HAVE NOT TESTED, BUYER BEWARE
	/*
	* Potential enhancements:
	* disable mangling to see component names
	* only do this with a certain env variable (e.g. PROFILE=true)?
	*/
	exports.onCreateWebpackConfig = ({
	actions,
	}) => {
	actions.setWebpackConfig({

	{
	"baseUrl": "http://localhost:8000"
	}