CODEWITHSUNDEEP
graphqlgatsby
James Howell
James Howell

Reputation: 1442

Is it possible to use dynamic query alias names in GraphQL?

I am currently working on a Gatsby documentation site. One particular page retrieves the content of various README files for HTML/CSS components which are grouped into three different categories, based on regex searches of their local filepath structure. I'm using 3 separate aliased queries at the moment to retrieve very similar data and the DRY coder in me feels this should be possible with one and a $group-type variable (which would replace atoms, molecules and organisms in the below code) or something similar. As I'm a real newbie to GraphQL I'm not sure if this is possible and I can't seem to find anyone doing this online. Here's what I have so far:

export const pageQuery = graphql`
  query($path: String!) {
    pageData: 
      markdownRemark(fields: { slug: { eq: $path } }) {
        html
        fields {
          slug
          title
        }
        fileAbsolutePath
      }


    atoms:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
        edges {
          node {
            fields {
              slug
              title
            }
          }
        }
      }

    molecules:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
        edges {
          node {
            fields {
              slug
              title
            }
          }
        }
      }
    organisms:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
        edges {
          node {
            fields {
              slug
              title
            }
          }
        }
      }
  }
`;

Upvotes: 0

Views: 1570

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84667

You can define fragments to use in your queries. These allow you to define a selection set once and then use it just by referencing the name of the fragment. Do note that you have to know the name of the type for which you're specifying the selection set.

export const pageQuery = graphql`
  query($path: String!) {
    pageData: 
      markdownRemark(fields: { slug: { eq: $path } }) {
        html
        fields {
          slug
          title
        }
        fileAbsolutePath
      }

    atoms:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
        ...MarkdownRemarkFields
      }

    molecules:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
        ...MarkdownRemarkFields
      }
    organisms:
      allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
        ...MarkdownRemarkFields
      }
  }

  fragment MarkdownRemarkFields on MarkdownRemarkConnection {
    edges {
      node {
        fields {
          slug
          title
        }
      }
    }
  }
`;

Fragments are mentioned in the Gatsby docs here.

Upvotes: 2

Related Questions