GraphQL Query Syntax Type?

Highlighted
Tourist
9 1 0

I am looking at this example provided by Shopify for a GraphQL query. What exactly is the syntax in the beginning. Doesn't look like standard GraphQL syntax I am working on in GraphiQL. What is "... on Product" referring to?

I tried to change Product, but I get this: GraphQL error: No such type Variant, so it can't be a fragment condition
How do I know what Types are available?

 

query getProducts($ids: [ID!]!) {
    nodes(ids: $ids) {
      ... on Product {
    
const GET_PRODUCTS_BY_ID = gql`
  query getProducts($ids: [ID!]!) {
    nodes(ids: $ids) {
      ... on Product {
        title
        handle
        descriptionHtml
        id
        images(first: 1) {
          edges {
            node {
              originalSrc
              altText
            }
          }
        }
        variants(first: 1) {
          edges {
            node {
              price
              id
            }
          }
        }
      }
    }
  }
`;

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
587 71 128

Hey @AppBuilder,

The ... you see in that query actually is an inline fragment. This is required when you query a field that can return more than 1 possible type. In this case, the query is looking at nodes which is essentially all types in the schema which are identified by an ID. You can see the possible types in our docs here.

If you aren't already, I recommend using an HTTP client like Insomnia for development, which automatically downloads the schema and makes it available for auto-completion as you build a query (demonstration below). Query auto-completion is also available through Postman, though it currently requires you to manually generate the schema and import it.

20-08-dkwxt-g2jji

JB | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes