Minor change to graphql query causes prismicClient.graphQLFetch to POST and not GET

Developing with Prismic
,
1

I am using prismic with NextJS and Urql.

I Have implemented the client settings as according to documentation.

const client = createClient({
    url: prismic.getGraphQLEndpoint(process.env.NEXT_PUBLIC_PRISMIC_REPOSITORY_NAME || ""),
    fetch: prismicClient.graphQLFetch,
    preferGetMethod: true,
  })

But something strange is happening.. When I run this query:

query marketingHomepage($uid: String! = "marketing-homepage", $lang: String = "nl-nl") {
  marketingHomepage(uid: $uid, lang: $lang) {
    _meta {
      uid
      id
    }
    slices {
      __typename
      ...marketingHomepageSlicesIntroDetails
    }
  }
}

It works fine. But when I add the following

query marketingHomepage($uid: String! = "marketing-homepage", $lang: String = "nl-nl") {
  marketingHomepage(uid: $uid, lang: $lang) {
    _meta {
      uid
      id
    }
    slices {
      __typename
      ...marketingHomepageSlicesBigStoryCardDetails #added this!
      ...marketingHomepageSlicesIntroDetails
    }
  }
}

It all breaks. and when I look at the events from urql using this:

 client.subscribeToDebugTarget((event) => {
      if (event.source === "dedupExchange") return
      console.log(event) // { type, message, operation, data, source, timestamp }
    })

I see that the first call goes like this (and i am getting good results...)

{
  timestamp: 1656949178228,
  source: 'fetchExchange',
  type: 'fetchRequest',
  message: 'A fetch request is being executed.',
  operation: {
    key: 2628845003,
    query: { kind: 'Document', definitions: [Array], loc: [Location] },
    variables: { uid: 'marketing-homepage', lang: undefined },
    kind: 'query',
    context: {
      _instance: undefined,
      url: 'https://rouze-v2.cdn.prismic.io/graphql',
      fetchOptions: undefined,
      fetch: [Function: bound graphQLFetch] AsyncFunction,
      preferGetMethod: true,
      suspense: false,
      requestPolicy: 'cache-first',
      meta: [Object]
    }
  },
  data: {
    url: 'https://rouze-v2.cdn.prismic.io/graphql?operationName=marketingHomepage&query=query%20marketingHomepage(%24uid%3A%20String!%20%3D%20%22marketing-homepage%22%2C%20%24lang%3A%20String%20%3D%20%22nl-nl%22)%20%7B%0A%20%20marketingHomepage(uid%3A%20%24uid%2C%20lang%3A%20%24lang)%20%7B%0A%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20uid%0A%20%20%20%20%20%20id%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20slices%20%7B%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20...marketingHomepageSlicesIntroDetails%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D%0A%0Afragment%20marketingHomepageSlicesIntroDetails%20on%20MarketingHomepageSlicesIntro%20%7B%0A%20%20type%0A%20%20variation%20%7B%0A%20%20%20%20...%20on%20MarketingHomepageSlicesIntroDefault%20%7B%0A%20%20%20%20%20%20primary%20%7B%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20body%0A%20%20%20%20%20%20%20%20partners%20%7B%0A%20%20%20%20%20%20%20%20%20%20...%20on%20Partners%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20uid%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20partners%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20image%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&variables=%7B%22uid%22%3A%22marketing-homepage%22%7D',
    fetchOptions: { body: undefined, method: 'GET', headers: [Object] }
  }
}

but the second call (when I add that line to grapqhl) I see this:

{
  timestamp: 1656949116579,
  source: 'fetchExchange',
  type: 'fetchRequest',
  message: 'A fetch request is being executed.',
  operation: {
    key: 286336860,
    query: { kind: 'Document', definitions: [Array], loc: [Location] },
    variables: { uid: 'marketing-homepage', lang: undefined },
    kind: 'query',
    context: {
      _instance: undefined,
      url: 'https://rouze-v2.cdn.prismic.io/graphql',
      fetchOptions: undefined,
      fetch: [Function: bound graphQLFetch] AsyncFunction,
      preferGetMethod: false,
      suspense: false,
      requestPolicy: 'cache-first',
      meta: [Object]
    }
  },
  data: {
    url: 'https://rouze-v2.cdn.prismic.io/graphql',
    fetchOptions: {
      body: '{"query":"query marketingHomepage($uid: String! = \\"marketing-homepage\\", $lang: String = \\"nl-nl\\") {\\n  marketingHomepage(uid: $uid, lang: $lang) {\\n    _meta {\\n      uid\\n      id\\n      __typename\\n    }\\n    slices {\\n      __typename\\n      ...marketingHomepageSlicesBigStoryCardDetails\\n      ...marketingHomepageSlicesIntroDetails\\n    }\\n    __typename\\n  }\\n}\\n\\nfragment marketingHomepageSlicesBigStoryCardDetails on MarketingHomepageSlicesBig_story_card {\\n  type\\n  variation {\\n    ... on MarketingHomepageSlicesBig_story_cardDefault {\\n      primary {\\n        callout\\n        story {\\n          ... on Story {\\n            title\\n            _meta {\\n              uid\\n              __typename\\n            }\\n            __typename\\n          }\\n          __typename\\n        }\\n        __typename\\n      }\\n      __typename\\n    }\\n    __typename\\n  }\\n}\\n\\nfragment marketingHomepageSlicesIntroDetails on MarketingHomepageSlicesIntro {\\n  type\\n  variation {\\n    ... on MarketingHomepageSlicesIntroDefault {\\n      primary {\\n        title\\n        body\\n        partners {\\n          ... on Partners {\\n            _meta {\\n              uid\\n              __typename\\n            }\\n            title\\n            partners {\\n              name\\n              image\\n              __typename\\n            }\\n            __typename\\n          }\\n          __typename\\n        }\\n        __typename\\n      }\\n      __typename\\n    }\\n    __typename\\n  }\\n}","operationName":"marketingHomepage","variables":{"uid":"marketing-homepage"}}',
      method: 'POST',
      headers: [Object]
    }
  }
}

It looks like the custom prismic fetcher is suddenly not using get and switching to post. (causing an error in cloudfront (as POST is not allowed).

I have no idea what is causing this. But looks like some limitations of prismic custom fetch (prismicClient.graphQLFetch)?

for reference: Here are my grapqhl querys:

query marketingHomepage($uid: String!, $lang: String = "nl-nl") {
  marketingHomepage(uid: $uid, lang: $lang) {
    _meta {
      uid
    }
    slices {
      ...marketingHomepageSlicesIntroDetails
      ...marketingHomepageSlicesBigStoryCardDetails
    }
  }
}


fragment marketingHomepageSlicesIntroDetails on MarketingHomepageSlicesIntro {
  type
  variation {
    ... on MarketingHomepageSlicesIntroDefault {
      primary {
        title
        body
        promisses {
          ... on Promisses {
            promisses {
              promise
            }
          }
        }
        partners {
          ... on Partners {
            title
            partners {
              name
              image
            }
          }
        }
      }
    }
  }
}

fragment marketingHomepageSlicesBigStoryCardDetails on MarketingHomepageSlicesBig_story_card {
  type
  variation {
    ... on MarketingHomepageSlicesBig_story_cardDefault {
      primary {
        callout
        story {
          ... on Story{
            title
          }
        }
      }
    }
  }
}
3

Hi @quinten1

I will try to investigate this, and it will be really easier if you can reproduce the issue on the Prismic GraphQL browser and send me a link to that.

You can access your GraphQL browser such as https://your-repo-name.cdn.prismic.io/graphql to learn more about using the GraphQL browser please check this article

Looking forward to your reply,
Fares

4

Thanks for your reply, but i dont see why trying to reproduce this issue in the prismic graphql browser will work. As the query is correct.

The problem is that the graphql fetch (from the prismic lib) is switching from get to post for some reason.

5

To raise this issue, I would need to reproduce it first; I will test your code on the project using GraphQL.

Also, it would be useful if you could share your project with a simplified project in a zip file; you can share this in a private message if necessary.