Open olavea opened 2 years ago
feat: add support for Gatsby Image and ImageCDN
Your dev-task: the WHAT, the WHY and the How.
«Nothing piraty about WHAT and WHY.» You say? Maybe not, but look at HOW....
GraphQL node type GraphQL kraken type GraphQL octopus type GraphQL object type
interfaces: [`Node`, `RemoteFile`],
name: `....`, fields: { youTubeId: "String!", },
schema
.buildObjectType({
TobbieThumbnailKraken
TobbieCrowdcastThumbnailObject
ThumbnailTobbieOctopus
CrowdcastThumbnailTobbie
actions.createKraken(
actions.createNode(
actions.createNodeField(
actions.createTypes(
your next sub-task:
const createYouTubeNode = async (gatsbyUtils, pluginOptions, youTubeId) => {
const scrapeCrowdcast = async () => {
const createCrowdcastThumbnailNode = (gatsbyUtils) => {
const createCrowdcastTypes = (gatsbyUtils) => {
const { schema, createNodeId } = gatsbyUtils;
const { actions, schema } = gatsbyUtils;
const { actions, createTypes } = gatsbyUtils;
const { createNode, createTypes } = actions;
exports.createSchema = (gatsbyUtils) => {
exports.createSchemaCustomization = (gatsbyUtils) => {
exports.schemaCustomization = (gatsbyUtils) => {
exports.createCustomSchema = (gatsbyUtils) => {
addRemoteFile........Interface(
addRemoteFilePlayfillInterface(
addRemoteFilePolyfillInterface(
addRemoteFilePollyfilInterface(
addRemoteFilePiratyInterface(
const { addRemoteFilePolyfillInterface, } = require("gatsby-plugin-tools/polyfill-remote-file");
const { addRemoteFilePolyfillInterface, } = require("gatsby-utils/polyfill-remote-file");
const { addRemoteFilePolyfillInterface, } = require("gatsby-plugin-timeship/polyfill-remote-file");
G. GraphQL type our heroine
I. Inside what actions.create.... do we Tobbie?
actions.create....
M. Must I add....face(?
add....face(
const ....Node = { height: 630 , width: 1200, }
const ....
const .... = async (gatsbyUtils, pluginOptions, youTubeId) => {
exports....
exports.createSc....Customization = (gatsbyUtils) => {
actions.create....(
{ height: 630, ... }
exports.onCreateDevS....r = ({ app }) => {};
poly....ImageServiceDevRoutes(app);
A.
G.
O.
const youTubeThumbnailNodeId = createNodeId( `${YOUTUBE_THUMBNAIL_TYPE} >>> ${....}` );
How can we tell the Crowdcast node to go on a blind date with the CrowdcastThumbnail node?
const createYouTubeTypes = (gatsbyUtils) => { const { actions, schema } = gatsbyUtils; actions.createTypes([ ` type YouTube implements Node { thumbnail: YouTubeThumbnail @link( from: "...." by: "...." ) } `,
[ ] N. is for Now you can celbrate!
C.
D.
N.
Ola Vea is a Gatsby-plugin-Dev who also helps Gatsby-Devs waste less time on unsticky dev-learning. Dev at POW! — the private menstrual cycle journal (usepow.app) 👑 @raae You can reach him at: ola@lillylabs
source docs/creating-a-source-plugin/#enabling-image-cdn-support
feat: add support for Gatsby Image and ImageCDN
IMAGE CDN
Gatsby-source-youtube-oembed Plugin Upgrade
Your dev-task: the WHAT, the WHY and the How.
«Nothing piraty about WHAT and WHY.» You say? Maybe not, but look at HOW....
How: not coding, but guessing
Guess her type
Puzzle the shards of code in the right order
Guess the name of our new type of friend
Guess the "actions...." to "create" Tobbie
your next sub-task:
I. Inside and Inside?
Inside which const do you put Tobbie's roof?
Deconstruct what two tools for Tobbie's toolshed?
Inside which "exports...." do we call Tobbie?
M. Is your last sub-task:
Must I
addRemoteFile........Interface(
to Tobbie?Must we require "gatsby-plugin- …."
You DID it! 1/3 of the treasure hunt 💪 😺 🏴☠️
You've done these 3 sub-tasks:
G. GraphQL type our heroine
I. Inside what
actions.create....
do we Tobbie?M. Must I
add....face(
?const ....Node = { height: 630 , width: 1200, }
const ....
?exports....
?actions.create....
?G. is for GrapiQL where we find 🍓 for fields
poly....ImageServiceDevRoutes(app);
?A.
G.
O.
You DID it! 2/3 of the treasure hunt 💪 😺 🏴☠️
C. is for createNodeId(
D. is for Dating
How can we tell the Crowdcast node to go on a blind date with the CrowdcastThumbnail node?
[ ] N. is for Now you can celbrate!
C.
D.
N.
You DID it! The whole treasure hunt 💪 😺 🏴☠️
Ola Vea is a Gatsby-plugin-Dev who also helps Gatsby-Devs waste less time on unsticky dev-learning. Dev at POW! — the private menstrual cycle journal (usepow.app) 👑 @raae You can reach him at: ola@lillylabs
source docs/creating-a-source-plugin/#enabling-image-cdn-support