CORS error with graphQuery

Developing with Prismic
1

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?

2

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

3

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

5

Hi Lennart,

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

1 Like
7

I've tried to reproduce the issue but unfortunately, this query that I have referred to doesn't work and gives me this error, I've tried to replace the ref with master ref but doesn't fix it.

Screenshot 2021-09-20 at 19.21.15
Screenshot 2021-09-20 at 19.21.153286×1888 463 KB

11

Are you sure the query I've referred to; works? can you try to run this query in an incognito tab?

14

Hi, @lennart. This issue is related to this issue as GraphQuery doesn't work with Slice Machine slices and I have already created an issue for this, and we will let you know if we have any updates.

16

This thread is being monitored as an open ticket in the internal Prismic issue tracker. The Prismic support team will update this post as we get more information from our dev team. If you have a similar use-case, you can ‘Flag’ this topic to reopen and add it here.

18

We have released a new version of the GraphQuery document. Now it has support for Slice Machine.

Please let us know if you have questions, comments, or suggestions.
Cheers!