graphqlshopifyshopify-hydrogen

Ability to retrieve multiple metafields via GraphQL in Shopify


I created some Metafields for Blog Posts and have them populated. I'm building a Hydrogen Shopify storefront and using GraphQL to fetch that blog/article data. But I can't seem to figure out how to get all the metafields. Seems like 'metafield' and 'metafields' only return a single field based on key and namespace. Is there a way to more than one?

query Blog($language: LanguageCode, $blogHandle: String!, $first: Int, $last: Int, $startCursor: String, $endCursor: String) @inContext(language: $language) {
  blog(handle: $blogHandle) {
    title
    seo {
      title
      description
    }
    articles(
      first: $first
      last: $last
      before: $startCursor
      after: $endCursor
      reverse: true
    ) {
      nodes {
        ...ArticleItem
        metafields(identifiers: {namespace: "custom", key: "misc_content_long_text_1"}) {
          value
          references {
            edges {
              node
            }
          }
        }
      }
      pageInfo {
        hasPreviousPage
        hasNextPage
        hasNextPage
        endCursor
        startCursor
      }
    }
  }
}

fragment ArticleItem on Article {
  author: authorV2 {
    name
  }
  contentHtml
  handle
  id
  image {
    id
    altText
    url
    width
    height
  }
  publishedAt
  title
  blog {
    handle
  }
}

My metafields include:

I'm hoping I don't have to call multiple queries to fetch those. TIA


Solution

  • You can achieve this by aliasing the meta fields. Here is the official documents https://www.shopify.com/in/partners/blog/how-to-use-graphql-aliases

    query Blog($language: LanguageCode, $blogHandle: String!, $first: Int, $last: Int, $startCursor: String, $endCursor: String) @inContext(language: $language) {
      blog(handle: $blogHandle) {
        title
        seo {
          title
          description
        }
        articles(
          first: $first
          last: $last
          before: $startCursor
          after: $endCursor
          reverse: true
        ) {
          nodes {
            ...ArticleItem
            misc_content_long_text_1 : metafields(identifiers: {namespace: "custom", key: "misc_content_long_text_1"}) {
              value
              references {
                edges {
                  node
                }
              }
            },
    misc_text_field_2: metafields(identifiers: {namespace: "custom", key: "misc_text_field_2"}) {
              value
              references {
                edges {
                  node
                }
              }
            }
          }
          pageInfo {
            hasPreviousPage
            hasNextPage
            hasNextPage
            endCursor
            startCursor
          }
        }
      }
    }
    
    fragment ArticleItem on Article {
      author: authorV2 {
        name
      }
      contentHtml
      handle
      id
      image {
        id
        altText
        url
        width
        height
      }
      publishedAt
      title
      blog {
        handle
      }
    }