diff --git a/demo/src/pages/index.js b/demo/src/pages/index.js index 1dbb752..9e1b70b 100755 --- a/demo/src/pages/index.js +++ b/demo/src/pages/index.js @@ -1,6 +1,6 @@ import React from "react"; import { graphql } from "gatsby"; -import { GatsbyImage, getImage } from "gatsby-plugin-image"; +import { GatsbyImage } from "gatsby-plugin-image"; const IndexPage = ({ data }) => { const { allYouTube } = data; @@ -19,13 +19,12 @@ const IndexPage = ({ data }) => {
{allYouTube.nodes.map((video) => { const { youTubeId, oEmbed, thumbnail } = video; - const image = getImage(thumbnail.childImageSharp.gatsbyImageData); return (

@@ -48,12 +47,12 @@ export const query = graphql` url } thumbnail { - childImageSharp { - gatsbyImageData( - transformOptions: { fit: COVER, cropFocus: CENTER } - aspectRatio: 1.77777778 - ) - } + gatsbyImage( + width: 480 + aspectRatio: 1.77777778 + fit: COVER + cropFocus: CENTER + ) } } } diff --git a/plugin/gatsby-node.js b/plugin/gatsby-node.js index 26b7a90..417375f 100644 --- a/plugin/gatsby-node.js +++ b/plugin/gatsby-node.js @@ -1,17 +1,22 @@ -// https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/ - const axios = require("axios"); -const { createRemoteFileNode } = require(`gatsby-source-filesystem`); +const { + polyfillImageServiceDevRoutes, + addRemoteFilePolyfillInterface, +} = require("gatsby-plugin-utils/polyfill-remote-file"); const SPLIT_ASCII = ">>>"; const IS_PROD = process.env.NODE_ENV === "production"; const REFRESH_INTERVAL = IS_PROD ? 0 : 60000 * 5; // 60000 ms === 1 min +exports.onCreateDevServer = ({ app }) => { + polyfillImageServiceDevRoutes(app); +}; + exports.pluginOptionsSchema = ({ Joi }) => { return Joi.object({ youTubeIds: Joi.array().items(Joi.string()).required(), refreshInterval: Joi.number().min(0).default(REFRESH_INTERVAL), - // Will not document splitAscii + // Will not document splitAscii, only for internal use splitAscii: Joi.string().default(SPLIT_ASCII), }); }; @@ -74,33 +79,60 @@ exports.sourceNodes = async (gatsbyUtils, pluginOptions) => { }; exports.onCreateNode = async (gatsbyUtils) => { - const { node, actions, reporter, createNodeId, getCache } = gatsbyUtils; + const { node, actions, reporter, createNodeId } = gatsbyUtils; const { createNodeField, createNode } = actions; if (node.internal.type === `YouTube`) { - const imageFile = await createRemoteFileNode({ - // The url of the remote file + const youTubeThumbnailNodeId = createNodeId( + `you-tube-thumbnail-${node.youTubeId}` + ); + + createNode({ + id: youTubeThumbnailNodeId, + parent: node.id, + youTubeId: node.youTubeId, url: node.oEmbed.thumbnail_url, - parentNodeId: node.id, - getCache, - createNode, - createNodeId, + mimeType: "image/jpeg", + filename: node.youTubeId + ".jpg", + height: node.oEmbed.thumbnail_height, + width: node.oEmbed.thumbnail_width, + internal: { + type: `YouTubeThumbnail`, + contentDigest: node.internal.contentDigest, + }, }); createNodeField({ node, name: `thumbnailFileId`, - value: imageFile.id, + value: youTubeThumbnailNodeId, }); - reporter.info(`Created YouTube File Node for ${node.youTubeId} thumbnail`); + reporter.info( + `Created YouTubeThumbnail Node for ${node.youTubeId} thumbnail` + ); } }; -exports.createSchemaCustomization = ({ actions }) => { - actions.createTypes(` +exports.createSchemaCustomization = ({ actions, schema }) => { + actions.createTypes([ + ` type YouTube implements Node { - thumbnail: File @link(from: "fields.thumbnailFileId") + thumbnail: YouTubeThumbnail @link(from: "fields.thumbnailFileId") } - `); + `, + addRemoteFilePolyfillInterface( + schema.buildObjectType({ + name: `YouTubeThumbnail`, + fields: { + youTubeId: "String!", + }, + interfaces: [`Node`, `RemoteFile`], + }), + { + schema, + actions, + } + ), + ]); };