Optimise GraphQuery hitting limit

[Phil (Phil Snow)]

Moving this post here:

@daf

On that note, I was wondering if you have any tips on handling long/large body slices with content relationships.

I feel within my NextJS app, I could improve the way in which I use GraphQuery with the API.

For instance, I've got a large GraphQuery for a PPC marketing landing, when I've had to add a new component, with a new slice lately, it leaves me too long a query request, which means the requests fails.

This is due to needing to get a number of relationship-based fields further down the slices tree. Which then results in a long GraphQuery file. For instance:

landing_page{
...landing_pageFields
body{
//otherslices
...onadd_related_product{
repeat{
...repeatFields
related_product{
...onproduct_page{
...product_pageFields
primary_category_rel{
...onprimary_category{
...primary_categoryFields
}
...onmanaged_laundry{
uid
heading
}
}
manufacturer{
...manufacturerFields
}
related_sub_type{
...onsub_type{
...sub_typeFields
}
}
category_rel{
...onproduct_type{
...product_typeFields
}
...onmanaged_laundry{
uid
heading
}
...onsignage_software{
uid
heading
}
...ontv_info_page{
uid
heading
}
...onguestcast_page{
uid
heading
}
...ondetergents_auto_dosing{
uid
heading
}
}
}
}
}
}
//otherslices
}
}

Should I be splitting longer body slice queries up into small chunks?

Then doing another request during build time to get the additional content, say requesting the product_page data, if a product type exists top_product through a separate function.

PS: The only solution I've had is trimming whitespace. Which works to an extent.

[Phil (Phil Snow)]

Hey @daf ,

When you say "Which then results in a long GraphQuery file" do you mean you're hitting the 2048 character limit in the query URL?

If so from your example I don't have any other suggestions than removing the whitespace. I think the best course of action is splitting the query up like you suggested and making multiple queries.

[daf (Duncan Forbes)]

Thanks Phil,

I think removing whitespaces ended up being sufficient in the end.

When eventually moving to GraphQL, it will definitely need a larger refactor in how I return queries and structure the data. Though when I come to it, I'll solve that issue.

[Phil (Phil Snow)]

Great, let me know how that goes.

For future readers, here are some optimisation tips:

For Slices you grab all the info like:

{
  blog {
    body {
      ...on text_block {
        non-repeat {
          ...non-repeatFields
        }
      }
      ...on image_gallery {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
    }
  }
}

We explain that in more detail here:

API reference for GraphQuery (fetchLinks v2)

For removing the whitespace you'll still need the new lines, so it will work like your example here:

{
blog{
body{
...ontext_block{
non-repeat{
...non-repeatFields
}
}
...onimage_gallery{
non-repeat{
...non-repeatFields
}
repeat{
...repeatFields
}
}
}
}
}

You can use this tool to do it for you:

Remove All Whitespace from Text - Online Text Tools