GitHub API: GitHub_URI (image) -> file nodes

[Soneji]

Hi

I have been trying to use <StaticImage /> or <GatsbyImage /> with data from the GitHub API

I am sourcing the GitHub API like this:

            resolve: `gatsby-source-graphql`,
            options: {
                typeName: `GitHub`,
                fieldName: `github`,
                url: `https://api.github.com/graphql`,
                headers: {
                    Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
                },
            },
        },

I want to transform

• "GitHub_Repository.openGraphImageUrl: GitHub_URI!" and
• "GitHub_User.avatarUrl: GitHub_URI!"
  to a file node so I can use it with GatsbyImage.

Do you guys have any tips/suggestions/ideas?

I have tried some of these with no avail:

• https://www.gatsbyjs.com/plugins/gatsby-plugin-remote-images
• [gatsby-source-graphql] How to download images from remote schema? #8404
• https://dev.to/nevernull/gatsby-with-wpgraphql-acf-and-gatbsy-image-72m
• https://thoughtsandstuff.com/gatsby-with-wordpress-caching-downloaded-media-images-to-reduce-build-time/
• https://www.gatsbyjs.com/plugins/gatsby-plugin-graphql-image/

I think the main type of error I'm getting is from either a plugin or my own gatsby-node.js where it's something like:

"gatsby-plugin-graphql-image" threw an error while running the createResolvers lifecycle:

Cannot find ObjectTypeComposer with name GitHub_RepositoryInfo

  64 |
  65 |   if (Object.keys(resolvers).length) {
> 66 |     createResolvers(resolvers);
     |     ^
  67 |   }
  68 | }

File: node_modules/gatsby-plugin-graphql-image/gatsby-node.js:66:5

[LekoArts]

You'll want to do something like shown here: https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#feeding-remote-images-into-gatsby-image

gatsby-config.js:

require("dotenv").config()

module.exports = {
  siteMetadata: {
    title: "discussion-30413",
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: "src",
      },
    },
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "GitHub",
        fieldName: "github",
        url: "https://api.github.com/graphql",
        headers: {
          Authorization: `bearer ${process.env.GITHUB_TOKEN}`
        }
      }
    }
  ],
};

gatsby-node.js:

const { createRemoteFileNode } = require("gatsby-source-filesystem")

exports.createResolvers = ({ actions, cache, createNodeId, createResolvers, store, reporter }) => {
  const { createNode } = actions

  createResolvers({
    GitHub_User: {
      avatarFile: {
        type: "File",
        resolve(source) {
          return createRemoteFileNode({
            url: source.avatarUrl,
            store,
            cache,
            createNode,
            createNodeId,
            reporter
          })
        }
      }
    },
    GitHub_Repository: {
      openGraphImageFile: {
        type: "File",
        resolve(source) {
          return createRemoteFileNode({
            url: source.openGraphImageUrl,
            store,
            cache,
            createNode,
            createNodeId,
            reporter
          })
        }
      }
    }
  })
}

[Soneji]

Thank you! This worked

And if anybody else stumbles across this in the future, this is the method I used to get and display the image

import React from "react";
import { graphql, useStaticQuery } from "gatsby";

import { GatsbyImage, getImage } from "gatsby-plugin-image";

const Header = () => {
  const data = useStaticQuery(graphql`
    {
      github {
        viewer {
          name
          avatarUrl
          avatarFile {
            childImageSharp {
              gatsbyImageData(
                width: 200
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
              )
            }
          }
        }
      }
    }
  `).github.viewer;

  return (
    <GatsbyImage
      style={{
        gridArea: "1/1",
        backgroundSize: "cover",
        width: "200px",
        height: "200px",
        borderRadius: "20px",
      }}
      layout="fullWidth"
      alt={"Picture of " + data.name}
      image={getImage(data.avatarFile)}
      formats={["auto", "webp", "avif"]}
    />
  );
};
export default Header;