Next.XP: Using Fragments in GraphQL freezes the app

Bugs
1

I wrote a query for content-type article of the demo-app.
For the different blocks I used fragments.

In graph-ql playground the query worked without issues- but when using in Next-Frontend the app freezed without any error-messages!

2

Hi @luctho !

It is impossible to tell what happened based on what you wrote alone.
But I could try to see what’s going on if you would share the query and changes you made to the next frontend.

Pavel

3

Hi @pmi,
here is the query for the content-type article with fragments:

import {APP_NAME_UNDERSCORED} from '../../_enonicAdapter/utils'

export const getArticleDetails = `
query ($path: ID!) {
  guillotine {
    get(key: $path) {
      _id
      displayName
      type
      ... on ${APP_NAME_UNDERSCORED}_Article {
        data {
          ... on ${APP_NAME_UNDERSCORED}_Article_Data {
            coverimage {
              _path
            }
            preface
            author
            tags
            spotlight {
              _id
              _path
            }
            blocks {
              ... on ${APP_NAME_UNDERSCORED}_Article_ContentBlocks {
                _selected
                text {
                  ...TextBlock
                }
                story {
                  ...StoryBlock
                }
                banner {
                  ...BannerBlock
                }
                quote {
                 ...QuoteBlock
                }
              }
            }
          }
        }
      }
    }
  }
}

fragment TextBlock on ${APP_NAME_UNDERSCORED}_Article_Text {
  text {
    processedHtml
  }
}

fragment StoryBlock on ${APP_NAME_UNDERSCORED}_Article_Story {
  panel {
    storyline
    image {
      ... on media_Image {
        imageUrl_sm: imageUrl(scale: "width(150)", type: absolute)
        imageUrl_lg: imageUrl(scale: "width(800)", type: absolute)
      }
    }
  }
}

fragment BannerBlock on ${APP_NAME_UNDERSCORED}_Article_Banner {
  image {
     ... on media_Image {
        imageUrl_sm: imageUrl(scale: "width(1280)", type: absolute)
      }
  }
  text
}

fragment QuoteBlock on ${APP_NAME_UNDERSCORED}_Article_Quote {
  text
  byline
}
`

Beside this query i added the following mapping:

ComponentRegistry.addContentType(`${APP_NAME}:article`, {
    query: getArticleDetails,
    view: Article
})

This caused the app to crash. Without fragements it works:

import {APP_NAME_UNDERSCORED} from '../../_enonicAdapter/utils'

export const getArticleDetails = `
query ($path: ID!) {
  guillotine {
    get(key: $path) {
      _id
      displayName
      type
      ... on ${APP_NAME_UNDERSCORED}_Article {
        data {
          ... on ${APP_NAME_UNDERSCORED}_Article_Data {
            coverimage {
              _path
            }
            preface
            author
            tags
            spotlight {
              _id
              _path
            }
            blocks {
              ... on ${APP_NAME_UNDERSCORED}_Article_ContentBlocks {
                _selected
                text {
                  ... on ${APP_NAME_UNDERSCORED}_Article_Text {
                   text(processHtml: {type: absolute}) {
                        processedHtml
                        links {
                          ref
                          media {
                            content {
                              _id
                            }
                          }
                        }
                      }
                  }
                }
                story {
                  ... on ${APP_NAME_UNDERSCORED}_Article_Story {
                    panel {
                      storyline
                      image {
                        ... on media_Image {
                          imageUrl_sm: imageUrl(scale: "width(150)", type: absolute)
                          imageUrl_lg: imageUrl(scale: "width(800)", type: absolute)
                          displayName
                        }
                      }
                    }
                  }
                }
                banner {
                  ... on ${APP_NAME_UNDERSCORED}_Article_Banner {
                    image {
                      ... on media_Image {
                        imageUrl: imageUrl(scale: "width(1280)", type: absolute)
                      }
                    }
                    text
                  }
                }
                quote {
                  ... on ${APP_NAME_UNDERSCORED}_Article_Quote {
                    text
                    byline
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
`
4

Thanks @luctho ! I will check that out and get back to you.

5

Hi @luctho !
I looked at that and can confirm that the app did hang indeed.

The reason it did not return any error was that we did not support fragments and javascript regular expression matcher just froze when parsing query with fragments.

I now added support for fragments in graphql queries and it will be added in the next release!

2 Likes