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

Question

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
}
}
}
}
}
`;

Answer 1

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.