Wpgraphql queries under fetching queries from wordpress - 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.