Images are not downloaded when called from src/pages

[kodonad]

Hey, for your information im new to Gatsby and trying to render a static site with static files.

I have problems handling images in Gutenberg Blocks. I queried the content I need via graphql and passed it through the contentParser function. But it didn't download the images as static files and returns nothing + there's no error.

Here's an insight to my syntax

import contentParser from 'gatsby-wpgraphql-inline-images'
const pluginOptions = {
    wordPressUrl: 'http://cms-gatsby-project.local',
    uploadsUrl: 'https://cms-gatsby-project.local/wp-content/uploads/'
}
const IndexPage = ({ data }) => {
    return (
           <div>{contentParser(data.wordpress.pages.nodes[0].content,pluginOptions)}</div>
        )
 }

 export const pageQuery = graphql`
        query frontPageQ{
            wordpress {
                pages(where: {name: "Startseite"}) {
                        nodes {
                            id
                            content
                        }
                }
    }
`
export default IndexPage

Hopefully you can help me :)

[progital]

Hey, Have you added plugin and plugin settings to gatsby-config.js?

[kodonad]

Yes, I did. I will post it in 12 hrs when I'm at my working place again.

Is it possible to be caused by using an older node version?

[progital]

Well, if there are no errors then it's not likely that an older node version is a problem. I've just done a quick test with very basic post content and it works with no issues. Lets check the following (in addition to gatsby-config.js)

• Please dump data.wordpress.pages.nodes
• Could you provide "raw" post content (i.e. what is saved in the db)?

[kodonad]

Back at office now =).

Edited: content(format: RAW) is always null

Here's my gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      }
    },
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: [`${__dirname}/src/sass`]
      }
    },
    {
      resolve: "gatsby-source-graphql",
      options: {
        // This type will contain remote schema Query type
        typeName: "WPGraphQL",
        // This is field under which it's accessible
        fieldName: "wordpress",
        // Url to query from
        url: "https://cms-gatsby-project.local/graphql",
        refetchInterval: 5,
      },
    },
    {
      resolve: 'gatsby-wpgraphql-inline-images',
      options: {
        wordPressUrl: 'https://cms-gatsby-project.local',
        uploadsUrl: 'https://cms-gatsby-project.local/wp-content/uploads/',
        processPostTypes: ['Page', 'Post','TeamMitglied'],
        graphqlTypeName: 'WPGraphQL',
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

And this is the result of my pageQuery , i copied & pasted from GraphiQL:

{
  "data": {
    "wordpress": {
      "pages": {
        "nodes": [
          {
            "id": "cGFnZToxNDQ=",
            "slug": "startseite",
            "content": "\n<div class=\"wp-block-media-text alignwide\"><figure class=\"wp-block-media-text__media\"><img src=\"https://cms-gatsby-project.local/wp-content/uploads/2019/07/nurse-587924_960_720.png\
" alt=\"\" class=\"wp-image-167\"/></figure><div class=\"wp-block-media-text__content\">\n<h2>Example Text with Image</h2>\n\n\n\n<h3>Headline</h3>\n\n\n\n<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor </p>\n\n\n\n<p>&#8220;  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor .&#8220;</p>\n</div></div>\n"
          }
        ]
      }
    }
  }
}

Additionally I attached an image that shows up the result for dangerouslySetInnerHTML and contentParser

[progital]

Edited: content(format: RAW) is always null

I probably explained it wrong. The result from GraphiQL is what I wanted.

Could you also console.log the actual values you have in data.wordpress.pages at runtime?

Like this

const IndexPage = ({ data }) => {
console.log(data.wordpress.pages)
    return (
           <div>{contentParser(data.wordpress.pages.nodes[0].content,pluginOptions)}</div>
        )
 }

Edited: Actually lets go one level up and dump data.wordpress.pages

[kodonad]

console.log of data.wordpress.pages.nodes[0].content

console.log of data.wordpress.pages

Edited: May should my wp-content/uploads be accessible for all? Because if i try to open it via browser i don't have access to it.

Hopefully this is what you call a dump :/

[progital]

By dumping I mean displaying the value of a variable on screen, i.e. console.log(value).

Yes, your uploads should be available, the way to test it is opening that image's url in browser. However even if they were not available it shouldn't result in an empty div. Yes, it doesn't look like your images are processed properly but the empty div is totally unexpected result.

[progital]

Please try this

const IndexPage = ({ data }) => {
    return (
           <div>{contentParser({ content: data.wordpress.pages.nodes[0].content }, pluginOptions)}</div>
        )
 }

[kodonad]

The result of this is that I got the content like i would get it from dangerouslySetInnerHTML :/

Edited: Is it possible that I be forced to use CreatePages instead of Pages with PageQueries?

[progital]

Edited: Is it possible that I be forced to use CreatePages instead of Pages with PageQueries?

I'm sorry, what do you mean by this?

I see that you have no imageSharp nodes in your screenshot. Could you add any image file to ${__dirname}/src/images to check if imageSharp works.

[kodonad]

Do you mean this?

{
  "data": {
    "allImageSharp": {
      "nodes": [
        {
          "fluid": {
            "originalImg": "/static/4a9773549091c227cd2eb82ccd9c5e3a/774d6/gatsby-icon.png",
            "originalName": "gatsby-icon.png",
            "src": "/static/4a9773549091c227cd2eb82ccd9c5e3a/774d6/gatsby-icon.png"
          }
        },
        {
          "fluid": {
            "originalImg": "/static/6d91c86c0fde632ba4cd01062fd9ccfa/af144/gatsby-astronaut.png",
            "originalName": "gatsby-astronaut.png",
            "src": "/static/6d91c86c0fde632ba4cd01062fd9ccfa/af144/gatsby-astronaut.png"
          }
        },
        {
          "fluid": {
            "originalImg": "/static/f90cef2f347c95a39a50bada8189407e/14dee/hDgEHNs.jpg",
            "originalName": "hDgEHNs.jpg", // this is a random image i moved to my src/images
            "src": "/static/f90cef2f347c95a39a50bada8189407e/bc3a8/hDgEHNs.jpg"
          }
        }
      ]
    }
  }
}

And additional to my Question: Every project I seen which is build with Gatsby used the createPage function in gatsby-node.js file. I don't use this function but use pageQueries in files like it is in my index.js to get my content

[progital]

If you have that page available then there is nothing to worry about. My guess is that your index.js lives in src/pages folder, right?

Ok, so imageSharp seems to be working. Any errors while running gatsby develop? Can I see the log?

[kodonad]

I put a console.log into the contentParser function with a new post. typeof content is a string, but the output is the same.

I can't download the images , so the contentParser may not be the problem anymore. It's just swaps the URLs or am I wrong?

And yes, my index.js lives in the src/pages folder.

Edited: attached gatsby develop log

[progital]

Basically Gatsby auto-runs createPage for all pages found in src/pages.

Images are downloaded in the sourceParser function.

[progital]

There is a discrepancy between your gatsby-config.js posted above and this log. There is no CustomPost in the config.

[kodonad]

Oh sorry, I'm at home trying to solve the problem, so my config changed a little bit!

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-source-graphql",
      options: {
        // This type will contain remote schema Query type
        typeName: "WPGraphQL",
        // This is field under which it's accessible
        fieldName: "wpgraphql",
        // Url to query from
        url: "http://localhost/gatsby-wp/graphql",
      },
    },
    {
      resolve: 'gatsby-wpgraphql-inline-images',
      options: {
        wordPressUrl: 'https://localhost/gatsby-wp',
        uploadsUrl: 'https://localhost/gatsby-wp/wp-content/uploads',
        processPostTypes: ['Page', 'Post', 'CustomPost'],
        graphqlTypeName: 'WPGraphQL',
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

[progital]

Ok, this

{
      resolve: 'gatsby-wpgraphql-inline-images',
      options: {
        wordPressUrl: 'https://localhost/gatsby-wp',
        uploadsUrl: 'https://localhost/gatsby-wp/wp-content/uploads',
        processPostTypes: ['Page', 'Post', 'CustomPost'],
        graphqlTypeName: 'WPGraphQL',
      },
    },

and this

const pluginOptions = {
    wordPressUrl: 'http://cms-gatsby-project.local',
    uploadsUrl: 'https://cms-gatsby-project.local/wp-content/uploads/'
}

should match

[kodonad]

my index.js located in src/pages/

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import contentParser from "gatsby-wpgraphql-inline-images"

const pluginOptions = {
  wordPressUrl: 'https://localhost/gatsby-wp',
  uploadsUrl: 'https://localhost/gatsby-wp/wp-content/uploads'
}
const IndexPage = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <div>{contentParser({content: data.wpgraphql.posts.nodes[0].content}, pluginOptions)}</div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)
export const pageQuery = graphql`
  query {
    wpgraphql {
      posts(where: {name: "hallo-welt"}) {
        nodes {
          slug
          content
        }
      }
    }
  }
`
export default IndexPage

[progital]

And are images available at this new url?

[kodonad]

yes they are

[progital]

Have you tried cleaning cache and re-running after all those changes?

[kodonad]

yes I ran gatsby clean

[progital]

Could you try changing https in all url to http?

[progital]

In your page content, in gatsby-config and in pluginOptions.

[kodonad]

I changed all urls to http, same effect.

[kodonad]

Am I missing something in my gatsby-node.js? It's empty right now.

[progital]

Ok, let me think about it.

[progital]

Am I missing something in my gatsby-node.js? It's empty right now.

If you don't create pages there then it can be empty.

[kodonad]

The result of this is that I got the content like i would get it from dangerouslySetInnerHTML :/

Edited: Is it possible that I be forced to use CreatePages instead of Pages with PageQueries?

Found a solution. It's necessary to createPages in gatsby-node.js to download images to static files

[progital]

Found a solution. It's necessary to createPages in gatsby-node.js to download images to static files

Glad that you found a solution. It's an interesting issue that pages from the pages folder fail to download image files. I will try to investigate it further.

[progital]

I've amended the title to reflect the actual problem

[spencersmb]

Hello, I just came accross this thread and am having a similar issue. I figured out a solution but I want to check with @progital to make sure this is valid.

I've got a working gatsby and wordpress site working locally. I'm creating pages with Gatsby in the gatsby-node.js file in order to get the inline images downloading to the static folder. This is where it gets dicey - in the examples @progital gives he uses content sourced from the wpgraphql query found here. However if you look at any of the image examples I couldn't find an image that was actually sourced from the static folder of the gatsby site. (which is the whole point of the plugin right?) If you look at the content that actually gets passed into the contentParser, the images are just the images from wordpress. So I did some digging and found that in my post.js template in the props is an object called pageContext. Inside that is the content with the modified Gatsby Img. Here is a snap-shot of my post.js file. Is this the correct way to move forward building a site for my client using this plugin?

import React from "react"
import { graphql } from "gatsby"
import contentParser from "gatsby-wpgraphql-inline-images"

const Post = props => {
  const pluginOptions = {
    wordPressUrl: `http://wpgraphql.local/`,
    uploadsUrl: `http://wpgraphql.local/wp-content/uploads/`,
  }
  const {
    // location,
    pageContext: {
      content, // THIS HAS THE GATSBY IMG DATA IN IT
    },
    data: {
      wpgraphql: { support: { title } }, // THIS HAS THE CONTENT STRAIGHT FROM WP
    },
  } = props

log
  return (
    <div>
      <h1>{title}</h1>
      <div>
        {contentParser({ content }, pluginOptions)}
      </div>
    </div>
  )
}

export default Post

export const pageQuery = graphql`
    query GET_POST($id: ID!) {
        wpgraphql {
            support(id: $id) {
                title
                content
            }
        }
    }
`

Config file:

{
      resolve: `gatsby-source-graphql`,
      options: {
        // This type will contain remote schema Query type
        typeName: `WPGraphQL`,
        // This is field under which it's accessible
        fieldName: `wpgraphql`,
        // Url to query from
        url: `http://wpgraphql.local/graphql`,
      },
    },
    {
      resolve: "gatsby-wpgraphql-inline-images",
      options: {
        wordPressUrl: "http://wpgraphql.local/",
        uploadsUrl: "http://wpgraphql.local/wp-content/uploads/",
        processPostTypes: ["Page", "Post", "Support"],
        graphqlTypeName: "WPGraphQL",
      },
    },

Added to the wp backend

function cptui_register_my_cpts_support_item() {

    /**
     * Post Type: Support Items.
     */

    $labels = [
        "name" => __( "Support Items", "twentytwenty" ),
        "singular_name" => __( "Support Item", "twentytwenty" ),
    ];

    $args = [
        "label" => __( "Support Items", "twentytwenty" ),
        "labels" => $labels,
        "description" => "",
        "public" => true,
        "publicly_queryable" => true,
        "show_ui" => true,
        "delete_with_user" => false,
        "show_in_rest" => true,
        "rest_base" => "",
        "rest_controller_class" => "WP_REST_Posts_Controller",
        "has_archive" => false,
        "show_in_menu" => true,
        "show_in_nav_menus" => true,
        "delete_with_user" => false,
        "exclude_from_search" => false,
        "capability_type" => "post",
        "map_meta_cap" => true,
        "rewrite" => [ "slug" => "support_item", "with_front" => true ],
        "query_var" => true,
        "supports" => [ "title", "editor", "thumbnail" ],
// ADDED TO WORK WITH WPGRAPHQL
        'show_in_graphql' => true,
        'hierarchical' => true,
        'graphql_single_name' => 'Support',
        'graphql_plural_name' => 'Supports',
    ];

    register_post_type( "support_item", $args );
}

add_action( 'init', 'cptui_register_my_cpts_support_item' );

Cheers, Spencer

[progital]

Hi @spencersmb

If you look at the content that actually gets passed into the contentParser, the images are just the images from wordpress.

Yes, this is how it should work. You pass the original content to the contentParser and get urls swapped with the static ones. Please open a new issue if you have any questions. I'm closing this one.

[progital]

The original issue was probably related to the missing uri in the query. My bad. It works for me now.