Possible I hit a Graphql size/length limit ?

[NiviJah]

Description

One of my pages is constructed with multiple GQL fragments, which in turn, have their own fragments.
Everything was working fine until I added one more component/fragment.

Now i'm getting Response not successful: Received status code 400

I ruled out any code issues, null, typos, duplications etc.
I found out that by removing any sufficient number of fields from any part of the query, it magically works again.

Gatsby info

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Shell: 5.0.11 - /usr/local/bin/bash
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.6.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.132
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.19.23 => 2.19.23 
    gatsby-cli: ^2.9.0 => 2.9.0 
    gatsby-plugin-env-variables: ^1.0.1 => 1.0.1 
    gatsby-plugin-flow: ^1.0.4 => 1.1.19 
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.22 
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.2 
    gatsby-plugin-robots-txt: ^1.4.0 => 1.5.0 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-sass: ^2.0.11 => 2.1.29 
    gatsby-plugin-sitemap: ^2.0.11 => 2.2.27 
    gatsby-plugin-styled-components: ^3.0.7 => 3.1.19 
    gatsby-plugin-typography: ^2.2.10 => 2.3.22 
    gatsby-source-graphql: ^2.1.33 => 2.1.33 
    gatsby-transformer-remark: ^2.6.50 => 2.6.53 
  npmGlobalPackages:
    gatsby-cli: 2.8.27

example query

    items {
      metaDescription
      titleTag
      url
      pencilBanner {
        ...PencilBannerFragment
      }
      hero {
        ...HeroCarouselFragment
      }
      itemsCollection {
        items {
          __typename
          ...OneFragment
          ...TwolFragment
          ...ThreelFragment
....
....
...TwentyFragment
        }
      }
    }
  }

screen recording

will edit with annotations if possible
https://youtu.be/DEnwTriHCuA

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[NiviJah]

Thank you for your reply @LekoArts.
I completely understand how much this would make it easier to debug.
But since the issue is most likely a very long page query, i don't see how can create a replicate without my actual data and tokens.
I will try to see if I can mock something up.
But I would very much appreciate if can at least begin to see if you can get a clue of what's going on

[NiviJah]

@LekoArts I invited you to a private repo replicating this issue
https://github.com/NiviJah/gatsby-issue-22412/

[NiviJah]

New information we found may indicate a limit in Apollo's HTTP GET

{"errors":[{"message":"Query cannot be executed. The maximum allowed size for a query is 8192 bytes but it was 8634 bytes","extensio
ns":{"contentful":{"code":"QUERY_TOO_BIG","querySizeInBytes":8634,"requestId":"f8e808a6-9544-49bb-a562-5de01fc36588"}}}]}

[NiviJah]

maybe a long shot but I am putting this here anyway, seems somewhat related to this:
#3094

[NiviJah]

Update,
Not sure yet, but this may be a Contentful issue and not a Gatsby issue.

In any case, splitting a very long query to aliases (not fragments), seem to have solve the issue

very rough POC

export const pageQuery = graphql`
  query DynamicLayoutPage(
    $locale: String
    $contentfulId: String
    $siteId: Int
  ) {
    CGQL {
      siteCollection(where: { siteId: $siteId }, locale: $locale) {
        ...SiteCollectionFragment
      }

      one: templateDynamicLayoutPageCollection(
        where: { sys: { id: $contentfulId } }
        locale: $locale
      ) {
        ...fragmentOne
      }
      two: templateDynamicLayoutPageCollection(
        where: { sys: { id: $contentfulId } }
        locale: $locale
      ) {
        ...fragmentTwo
      }
    }
  }
`;

I will update

[LekoArts]

Thanks for the investigation on this!

This indeed doesn't seem to be an issue with Gatsby, I'd suggest going with the aliases (which are nicer anyways).

Thus closing this but feel free to comment more if you get more information from e.g. Contentful's support. Thanks!