Approaches to prevent exceeding query size limit

APIs Content Delivery API
1

I have a content type representing a page, this content type takes a reference of either Layout A, Layout B, Layout C - we need this separation, since different layouts take different blocks and headers. My GraphQL query looks something like this:

export const FRAGMENT_PAGE = gql`
    fragment PageFields on Page {
        layout {
            ... on LayoutA {
                ...LayoutAFields
            }
            ... on LayoutB {
                ...LayoutBFields
            }
            ... on LayoutC {
                ...LayoutCFields
            }
        }
    }
    ${FRAGMENT_LAYOUT_A}
    ${FRAGMENT_LAYOUT_B}
    ${FRAGMENT_LAYOUT_C}
`;

Each layout looks something like this (minimal example):

export const FRAGMENT_LAYOUT_A = gql`
    fragment LayoutAFields on LayoutA {
        sys {
            ...SysFields
        }
        header {
            ... on HeaderContent {
                ...HeaderContentFields
            }
        }
        blocksCollection {
            total
            items {
                ... on BlockA {
                    ...BlockAFields
                }
                ... on BlockB {
                    ...BlockBFields
                }               
            }
        }
    }
    ${FRAGMENT_SYS}
    ${FRAGMENT_HEADER_CONTENT}
    ${FRAGMENT_BLOCK_A}
    ${FRAGMENT_BLOCK_B}
`;

This worked fine until I apparently added to many blocks which made my query exceed its size limit.

Any ideas on how to reduce query size and/or different approach to query a page’s layout type?

1 Like