[Discussion] Allow substitution in graphql string templates

I’m new to graphql, but I find a lot of my queries are very long and repetitive, and being able to interpolate repeated sections would make my code a lot easier to read and update.

Here’s one section of graphql I have on one of my templates:

      # SUBNAV PROPERTIES - CATEGORY
      overviewNavTitle
      categorySlug: slug
      subcategories {
        description: navDescription
        id
        slug
        title: navTitle
      }

      # SUBNAV PROPERTIES - NESTED ARTICLE
      parentCategory: contentpage {
        categoryTitle: navTitle
        categoryDescription: navDescription
        overviewNavTitle
        categorySlug: slug
        subcategories {
          description: navDescription
          id
          slug
          title: navTitle
        }
      }

I wish I could write it like this:

      # SUBNAV PROPERTIES - CATEGORY
      ${commonNavProps}

      # SUBNAV PROPERTIES - NESTED ARTICLE
      parentCategory: contentpage {
        categoryTitle: navTitle
        categoryDescription: navDescription
        ${commonNavProps}
      }

But I get an error triggered by this code: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/babel-plugin-extract-graphql.js#L10

This code does not run on queries in my gatsby-node file, so I’ve been taking advantage of interpolation there and it’s made things a lot easier.

I tried to look into a solution for this myself, but I’m a bit out of my element dealing with babel ASTs, so I thought I’d pause and see:

• Is this something other people are interested in? (Maybe even people who know how to fix the issue?)
• Is there a way to get around the problem? My best idea so far is to do more of my queries in gatsby-node and send the results to my templates using templateContext, but that feels wrong 😕

[sarahatwork]

Thanks @calcsam. I had tried those before (and I’m using inline fragments elsewhere) but I guess I had the formatting wrong because I couldn’t get them to work. Your comment inspired me to try them again and now I have it working. Fragments are more flexible than I thought. I guess that solves the issue!

[sarahatwork]

Yeah in my case it wound up being:

export const pageQuery = graphql`
  fragment commonNavProps on ContentfulContentPage {
    overviewNavTitle
    categorySlug: slug
    subcategories {
      description: navDescription
      id
      slug
      title: navTitle
    }
  }

  query contentPageQuery($id: String!) {
    contentfulContentPage(id: { eq: $id }) {
      # SUBNAV PROPERTIES - CATEGORY
      ...commonNavProps

      # SUBNAV PROPERTIES - NESTED ARTICLE
      parentCategory: contentpage {
        categoryTitle: navTitle
        categoryDescription: navDescription
        ...commonNavProps
      }
  }
`;

Still can’t do everything I want, like a fragment containing inline fragments, but still reducing some repetition.