Skip to content

Conversation

tony
Copy link

@tony tony commented Jul 17, 2021

Description

This PR exports type guards for isGatsbyImageData() and isGatsbyImageDataParent()

Documentation

Example

import React from "react";
import { getSrc, isGatsbyImageData } from "gatsby-plugin-image";
import { GatsbySeo } from "gatsby-plugin-next-seo";

const SEO: React.FC<{
  imageData?: any,
  siteUrl: string,
}> = ({imageData, siteUrl, ...props}) => {
  return (
    <GatsbySeo
      openGraph={{
        ...(isGatsbyImageData(imageData)
          ? {
              images: [
                {
                  url: siteUrl.concat(getSrc(imageData)),
                  width: imageData.width,
                  height: imageData.height,
                },
              ],
            }
          : {})
      }}
     />
   )
}

Related Issues

Similar export: #30590 of ImageDataLike

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jul 17, 2021
@tony
Copy link
Author

tony commented Jul 17, 2021

I'm deleting this for now, I believe I'm simply misunderstand gatsby-image-plugin

For anyone who bumps into this, the code I got for images and typings to work together is:

import React from "react";
import { getSrc, isGatsbyImageData } from "gatsby-plugin-image";
import { GatsbySeo } from "gatsby-plugin-next-seo";

const SEO: React.FC<{
  imageData?: any,
  siteUrl: string,
}> = ({imageData, siteUrl, ...props}) => {
  let ogImageUrl;
  const image = getImage(imageData);
  if (image && siteUrl) {
    const src = getSrc(imageData);
    if (src) {
      ogImageUrl = siteUrl.concat(src);
    }
  }
  return (
    <GatsbySeo
      openGraph={{
        ...(imageData && ogImageUrl
          ? {
              images: [
                {
                  url: siteUrl.concat(getSrc(imageData)),
                  width: imageData.width,
                  height: imageData.height,
                },
              ],
            }
          : {})
      }}
     />
   )
}

@tony tony closed this Jul 17, 2021
@tony
Copy link
Author

tony commented Jul 17, 2021

If by chance someone else wants to export these, please feel free to. I didn't rule out potential usefulness of this in the future.

@LekoArts LekoArts removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jul 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants