Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gatsby-plugin-image): Export isGatsbyImageData(Parent) type #32403

Closed
wants to merge 1 commit into from

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