Wpgraphql queries under fetching queries from wordpress

Question

I have this issue were I'm trying to request images I've uploaded on my WordPress instance with graphql from Gatsby but I only get the most recent item I uploaded on wordpress.

When i query using the Graphiql IDE on WordPress I the desired results. See this image ➡️ Image of the query and response in get from Graphiql IDE on wordpress

Below is the query and response in get from Graphiql IDE on wordpress

// Graphiql IDE query
{
  mediaItems {
    edges {
      node {
        databaseId
      }
    }
  }
}


// The response

{
  "data": {
    "mediaItems": {
      "edges": [
        {
          "node": {
            "databaseId": 30
          }
        },
        {
          "node": {
            "databaseId": 28
          }
        },
        {
          "node": {
            "databaseId": 26
          }
        },
        {
          "node": {
            "databaseId": 20
          }
        }
      ]
    }
  },
  "extensions": {
    "debug": []
  }
}

but when I query from the http://localhost:8000/___graphql endpoint on my local development as I said earlier I only get the most recent upload.

Image of local development query and response

the code is below

// The query to http://localhost:8000/___graphql endpoint
{
  wpMediaItem {
    altText
    localFile {
      childImageSharp {
        gatsbyImageData(placeholder: TRACED_SVG, width: 100)
        id
      }
    }
  }
}

// The response
{
  "data": {
    "wpMediaItem": {
      "altText": "background lines",
      "localFile": {
        "childImageSharp": null
      }
    }
  },
  "extensions": {}
}

The ednpoints I can query the enpoints img 1 the enpoints img 2

Below is my gatsby-config.js file

const path = require("path");
// Get paths of Gatsby's required rules, which as of writing is located at:
// https://github.com/gatsbyjs/gatsby/tree/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/
// gatsby/src/utils/eslint-rules
const gatsbyRequiredRules = path.join(
  process.cwd(),
  "node_modules",
  "gatsby",
  "dist",
  "utils",
  "eslint-rules"
);

module.exports = {
  siteMetadata: {
    title: `########`,
    description: `################`,
    author: `###################`,
    siteUrl: `###############`,
  },
  plugins: [
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `http://34.133.115.37/graphql`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Poppins`],
        display: `swap`,
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },
    {
      resolve: "gatsby-plugin-eslint",
      options: {
        // Gatsby required rules directory
        rulePaths: [gatsbyRequiredRules],
        // Default settings that may be ommitted or customized
        stages: ["develop"],
        extensions: ["js", "jsx", "ts", "tsx"],
        exclude: ["node_modules", "bower_components", ".cache", "public"],
        // Any additional eslint-webpack-plugin options below
        // ...
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

I don't know but probably my query is request is wrong, I have tried every can some help

Answer 1

wpMediaItem is not the same node as wpMediaItems (spot the trailing S). The first one is querying a single node, which by default would be sorted by upload date, while wpMediaItems fetch for all images, an array of images ( edges in this case), that's why you can get edges in one query and an isolated node in the other, directly accessing for that node data ( altText , etc.).

Take a deeper look at the GraphiQL playground ( http://localhost:8000/___graphql ) to get the correct node, but it should be there.