How to query a specific node using Graphql?

Question

I am trying to use Graphql to return a specific instance of an object.

This is my Graphql query:

query MyQuery {
  allContentfulFlexStyleBody {
    edges {
      node {
        image {
          file {
            url
          }
        }
      }
    }
  }
}

It returns 3 Nodes:

{
  "data": {
    "allContentfulFlexStyleBody": {
      "edges": [
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/6JTBUN3mkENLvEVuC/6ff4b2da441f1c7cec2eb401534aa749/-19.jpeg"
              }
            }
          }
        },
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/2s6lg5oBJ7F780DI1/b4068dcc9cc889dbcd09ed992793e771/-BTS.png"
              }
            }
          }
        },
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/6bRRjlI1nLFCdUawZ/12af617d352b21864192dcc033198951/MyStylist_Photo_Grid_Layout__Retouched_Photos_Shortlist-6.jpeg"
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

I am attempting to display one image within my gatsby project as such:

 {data.allContentfulFlexStyleBody.edges.map(({ node }, index) => (
    <img
      className={"contentFeatureImg"}
      alt={``}
      key={``}
      src={node.image.file.url}
    />
  ))}

All images are being displayed. How do I access the first, second or third node exclusively without returning the entire edges array?

Do you mean that you want to display just one image? Or do you want to query only a specific image (with for example an id) in the GraphQL server? — FloWy
– FloWy, Commented Sep 2, 2021 at 10:49
Can you inspect the schema? Most likely there is a query where you can receive all the information of one image. — FloWy
– FloWy, Commented Sep 2, 2021 at 11:25

jibreal · Accepted Answer · 2021-09-02 12:53:56Z

0

Accessing a specific element of the edges array works enough for what I'm doing here:

  <img
    className={"contentFeatureImg1"}
    alt={``}
    key={``}
    src={data.allContentfulFlexStyleBody.edges[0].node.image.file.url}
  />

answered Sep 2, 2021 at 12:53

jibreal

819 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to query a specific node using Graphql?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related