GatsbyImage Wordpress

[anver]

I'm using gatsby-source-wordpress to pull data from wp and I`m using latest version of gatsby here is my part of package.json

    "gatsby": "^4.2.0",
    "gatsby-plugin-image": "^2.2.0",
    "gatsby-plugin-sharp": "^4.2.0",
    "gatsby-source-filesystem": "^4.2.0",
    "gatsby-source-wordpress": "^6.2.0",
    "gatsby-transformer-sharp": "^4.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.2",

Here is my plugin section

    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-wordpress",
      options: {
        url: process.env.GATSBY_GRAPHQL_URL,
        schema: {
          timeout: 80000,
        },
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          // hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },

this is a section which pulls everything from wp to build stuff - imported inside gatsby-node.ts

  const PostTemplate = path.resolve("./src/templates/Post.tsx");
  const posts = result?.data?.posts.nodes;
  console.log('posts: ', posts);

  posts?.forEach(post => {
    const { id } = post;
    createPage({
      path: `post/${id}`,
      component: PostTemplate,
      context: { ...post },
    });
  });
};

./src/templates/Post.tsx

import React from "react";
type Props = { pageContext: TPost };

const Post: React.FC<Props> = ({ pageContext }) => {
  const { title, content } = pageContext;

  return (
    <div>
      <h1 dangerouslySetInnerHTML={{ __html: title }} />
      <article dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
};

export default Post;

here is my src/pages/index.tsx

import * as React from "react";
import { graphql } from "gatsby";
import ArticleList from "../components/home/ArticleList";
import HomeLayout from "../components/layout/Home";
type Props = { data: TAllPosts };

const IndexPage: React.FC<Props> = ({ data }) => {
  const { posts } = data;
  return (
    <HomeLayout>
      <ArticleList posts={posts.nodes} />
    </HomeLayout>
  );
};

export default IndexPage;

export const query = graphql`
  query {
    posts: allWpPost(sort: { fields: [date] }) {
      nodes {
        id: databaseId
        slug
        title
        content
        excerpt
        date
        media: featuredImage {
          node {
            altText
            caption
            sourceUrl
            mediaDetails {
              sizes {
                height
                width
                name
                sourceUrl
              }
            }
          }
        }
      }
    }
  }
`;

my src/components/home/ArticleList.tsx

import React from "react";
import { Link } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
type Props = { posts: TPost[] };

const ArticleList: React.FC<Props> = ({ posts }) => {
  return (
    <>
      {Array.isArray(posts) &&
        posts.length > 0 &&
        posts.map(post => {
          return <Article key={post.id} post={post} />;
        })}
    </>
  );
};

const Article: React.FC<{ post: TPost }> = ({ post }) => {
  const { title, id, excerpt } = post;
  const media = post.media?.node;

  return (
    <section className="border border-dashed p-2">
      {media && media?.sourceUrl && (
        <div>
          <GatsbyImage alt={media.altText} image={getImage(media)} />
        </div>
      )}
      <h3 className="font-bold mb-2">
        <Link
          key={id}
          to={`post/${id}`}
          dangerouslySetInnerHTML={{ __html: title }}
        />
      </h3>
      <article dangerouslySetInnerHTML={{ __html: excerpt }} className="mb-2" />
      <Link to={`post/${id}`}>
        <button className="p-2 border-2 border-blue-500 rounded-lg text-blue-800">
          Read More
        </button>
      </Link>
    </section>
  );
};

export default ArticleList;

Gatsby is downloading all the images and stuffs from the wp site but I have no idea how to use the GatsbyImage / StaticImage component. I've searched everywhere and looked at all the youtube videos and I found nothing on how to use this with wordpress, please help, i'm pretty new to gatsby. I need to know how to use the images pulled from the wp site inside gatsby using the GatsbyImage / StaticImage components, thx.

[anver]

Cool, I think I found the solution, I got what I was looking for on this page, https://github.com/gatsbyjs/gatsby-starter-wordpress-blog/blob/main/src/templates/blog-post.js
Things are found when we look in the right place :)