CORS error with graphQuery

Hej,

I need to resolve a linked document in slice. Therefore, I am trying to fetch data with a graphQuery parameter.

Problem: Once I am trying to specify the data, i get CORS errors on fetching. The CORS error is shown in the console. Clicking the link I get a 500 error...

    const graphQuery = `
{
  homepage {
    body {
      ...on faq_slice {
        non-repeat {
          ...non-repeatFields
        }
      }
    }
  }
}`

https://elvah.cdn.prismic.io/api/v2/documents/search?page=1&pageSize=1&graphQuery= { %20%20homepage%20{ %20%20%20%20body%20{ %20%20%20%20%20%20...on%20faq_slice%20{ %20%20%20%20%20%20%20%20non-repeat%20{ %20%20%20%20%20%20%20%20%20%20...non-repeatFields %20%20%20%20%20%20%20%20} %20%20%20%20%20%20} %20%20%20%20} %20%20} }&ref={"_tracker"%3A"ywZbhP8Y"}&q=[[at(document.type%2C%20"homepage")]]

This works though:

    const graphQuery = `
{
homepage{
...homepageFields
}
}`

https://elvah.cdn.prismic.io/api/v2/documents/search?page=1&pageSize=1&graphQuery=%0A%7B%0Ahomepage%7B%0A...homepageFields%0A%7D%0A%7D&ref=%7B"_tracker"%3A"PrJ9tdS6"%7D&q=%5B%5Bat(document.type%2C "homepage")%5D%5D

Am I doing something wrong?

Hi,

Thanks for reaching out.

In many cases, you can have CORS issues when your Query is big,

For now, queries are passed in the request header, and there is a limit in the number of characters passed in the URL. For more please check this issue.

A workaround this can be by using GraphQL minifier tool such as https://www.npmjs.com/package/gqlmin where it strips the indentations from the query.

Please let us know if that works for you,
Fares

Hey @Fares,
Thank for getting back to me on that question.

The query size can not be the problem I think.

Let me give some more context.
I have a singleton type "homepage" with two slices on it. One is created on the dashboard (test_slice ), the other through slicemaschine (faq_collection )

If I get the entire document via API i get the following output:

{
  "id": "YToFzhAAACEAbmyN",
  "uid": "homepage",
  "url": null,
  "type": "homepage",
  "href": "https://elvah.cdn.prismic.io/api/v2/documents/search?ref=YTtYzhAAACUA0XzL&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YToFzhAAACEAbmyN%22%29+%5D%5D",
  "tags": [],
  "first_publication_date": "2021-09-09T13:02:19+0000",
  "last_publication_date": "2021-09-10T13:08:30+0000",
  "slugs": [
    "homepage"
  ],
  "linked_documents": [],
  "lang": "de-de",
  "alternate_languages": [],
  "data": {
    "faqs": [],
    "body": [
      {
        "slice_type": "test_slice",
        "slice_label": null,
        "items": [
          {}
        ],
        "primary": {
          "test": [
            {
              "type": "heading1",
              "text": "Meh!!!",
              "spans": []
            }
          ],
          "test2": [
            {
              "type": "paragraph",
              "text": "Ohh man",
              "spans": []
            }
          ]
        }
      },
      {
        "slice_type": "faq_collection",
        "slice_label": null,
        "version": "sktwi1xtmkfgx8626",
        "variation": "default-slice",
        "primary": {
          "title": [
            {
              "type": "heading1",
              "text": "Teeeeeeeeeest",
              "spans": []
            }
          ],
          "description": []
        },
        "items": [
          {}
        ]
      }
    ]
  }
}

If I now query the document with graphQuery i can query for the slice created through the dashboard successfully:

    const GraphQuery1 = `{
homepage{
body{
...on test_slice{
non-repeat{
...non-repeatFields
}
}
}
}
}`

    const response = await $prismic.api.getSingle('homepage', {
      graphQuery: graphQuery1,
    })

Query URL: https://elvah.cdn.prismic.io/api/v2/documents/search?page=1&pageSize=1&graphQuery=%7B%0Ahomepage%7B%0Abody%7B%0A...on test_slice%7B%0Anon-repeat%7B%0A...non-repeatFields%0A%7D%0A%7D%0A%7D%0A%7D%0A%7D&ref=%7B"_tracker"%3A"JGo5SweF"%7D&q=%5B%5Bat(document.type%2C "homepage")%5D%5D

The query returns the 'homepage' document with just the 'test_slice' attached. So far so good.

NOW:

If I perform the same query, but want to retrieve the other slice created through slicemaschine, it does not work - result: Error 400 / CORS issue

    const graphQuery2 = `{
homepage{
body{
...on faq_collection{
non-repeat{
...non-repeatFields
}
}
}
}
}`

    const response = await $prismic.api.getSingle('homepage', {
      graphQuery: graphQuery2,
    })

Query URL:
elvah.cdn.prismic.io

Hi Lennart,

Ok, I will investigate this and get back to you.