Hej,
I am not able to query slices that are created through slice maschine locally with graphQuery. The API always returns a 400 error. The exact same query with the same slice created on the prismic dashboard works just fine.
Is that a known issue?
Happy for any helping words on this.
Hi @lennart,
Thanks for reaching out.
I'm not sure I have understood the issue. Is it that you can't query your slice machine slices data? have you pushed your slice to your repo? Can you please give us a link example?
It would also be useful to have the name of the repository you are using (in a private message if necessary) and the name of the slice you are not able to fetch its data.
Looking forward to your reply,
I will try to describe the issue in more detail:
I want to use graphQuery to fetch a content relationship within a slice (from slice machine) of a custom type singleton in the end, but I am already failing at an earlier stage. I am not able to fetch content from a slice-machine slice at all with graphQuery.
I have the following graphquery_test singeleton type containing a simple Slice zone. This slice-zone can handle two kind of slices:
GraphQueryTestPrismicDashboard slice created through the dashboard.graph_query_test slice created through slicemachine UI (structure below){
"Main" : {
"uid" : {
"type" : "UID",
"config" : {
"label" : "uid",
"placeholder" : "uid"
}
},
"body" : {
"type" : "Slices",
"fieldset" : "Slice zone",
"config" : {
"labels" : null,
"choices" : {
"graph_query_test" : {
"type" : "SharedSlice"
},
"graphquerytestprismicdashboard" : {
"type" : "Slice",
"fieldset" : "GraphQueryTestPrismicDashboard",
"description" : "GraphQueryTestPrismicDashboard",
"icon" : "add_alert",
"display" : "list",
"non-repeat" : {
"title" : {
"type" : "StructuredText",
"config" : {
"single" : "heading1,heading2,heading3,heading4,heading5,heading6",
"label" : "title",
"placeholder" : "title"
}
}
},
"repeat" : { }
}
}
}
}
}
}
The slice created through slice machine looks like that:
{
"id": "graph_query_test",
"type": "SharedSlice",
"name": "GraphQueryTest",
"description": "GraphQueryTest",
"variations": [
{
"id": "default-slice",
"name": "Default slice",
"docURL": "...",
"version": "sktwi1xtmkfgx8626",
"description": "GraphQueryTest",
"primary": {
"title": {
"type": "StructuredText",
"config": {
"single": "heading1",
"label": "Title",
"placeholder": "This is where it all begins..."
}
}
},
"items": {}
}
]
}
The entire document looks like that when fetched from the api as a whole:
{
"id": "YUITcxEAACUAw5Yv",
"uid": "myuid",
"url": null,
"type": "graphquery_test",
"href": "https://elvah.cdn.prismic.io/api/v2/documents/search?ref=YUJUDhEAACUAxLCp&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YUITcxEAACUAw5Yv%22%29+%5D%5D",
"tags": [],
"first_publication_date": "2021-09-15T15:38:31+0000",
"last_publication_date": "2021-09-15T16:34:46+0000",
"slugs": [
"graphquery_test"
],
"linked_documents": [],
"lang": "de-de",
"alternate_languages": [],
"data": {
"body": [
{
"slice_type": "graph_query_test",
"slice_label": null,
"version": "sktwi1xtmkfgx8626",
"variation": "default-slice",
"primary": {
"title": [
{
"type": "heading1",
"text": "dasdassssss",
"spans": []
}
]
},
"items": [
{}
]
},
{
"slice_type": "graphquerytestprismicdashboard",
"slice_label": null,
"items": [
{}
],
"primary": {
"title": [
{
"type": "heading1",
"text": "Meh",
"spans": []
}
]
}
}
]
}
}
Now I want to get the singeton with graphQuery.
This works:
const graphQuery1 = `{
graphquery_test{
body{
...on graphquerytestprismicdashboard {
non-repeat{
...non-repeatFields
}
}
}
}
}`
const response = await $prismic.api.getSingle(
'graphquery_test',
{ graphQuery: graphQuery1 }
)
console.log(response)
Respone -->
{
"id": "YUITcxEAACUAw5Yv",
"uid": "myuid",
"url": null,
"type": "graphquery_test",
"href": "https://elvah.cdn.prismic.io/api/v2/documents/search?ref=YUJUDhEAACUAxLCp&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YUITcxEAACUAw5Yv%22%29+%5D%5D",
"tags": [],
"first_publication_date": "2021-09-15T15:38:31+0000",
"last_publication_date": "2021-09-15T16:34:46+0000",
"slugs": [
"graphquery_test"
],
"linked_documents": [],
"lang": "de-de",
"alternate_languages": [],
"data": {
"body": [
{
"slice_type": "graphquerytestprismicdashboard",
"slice_label": null,
"items": [
{}
],
"primary": {
"title": [
{
"type": "heading1",
"text": "Meh",
"spans": []
}
]
}
}
]
}
}
.
.
.
.
BUT if I try to query the other slice it only returns 500 server error
const graphQuery1 = `{
graphquery_test{
body{
...on graph_query_test {
non-repeat{
...non-repeatFields
}
}
}
}
}`
Response -->
QueryURL:
elvah.cdn.prismic.io
Ok, thanks for the Info, I'm still investigating.
Hi @lennart,
I've been able to reproduce the issue on a clone of your repository and yes I get a 500 error when trying to fetch the Slice machine slice.
For that, I have created an issue to investigate further this issue.
This thread is being monitored as an open ticket in the issue tracker. We will update this post as we get more information. If you have a similar use-case, you can ‘Flag’ this topic to reopen.
I just spent 1 hour trying to figure out this issue before I came across this ticket.
Are there any updates on this?
Hi Kris,
Sorry about the lack of updates on this one. It seems this issue has been resolved. Can you send me an example of a query that you're trying to do?
Thanks.
@Phil I just gave it a go but I don't think it's working. Or maybe my query is incorrect?
Graph query:
`{
page {
body {
...on form {
non-repeat {
title
formLink {
...form_linkFields
}
}
}
}
}
}`
Api call:
const doc =
(await Client().getByUID("page", params.uid, {
ref: ref ? ref : null,
graphQuery: formGQ,
})) || {};
Page JSON:
{
"id": "page",
"label": "Page",
"repeatable": true,
"status": true,
"json": {
"Main": {
"uid": {
"config": {
"label": "uid",
"placeholder": ""
},
"type": "UID"
},
"slices": {
"type": "Slices",
"fieldset": "Slice Zone",
"config": {
"choices": {
"hero": {
"type": "SharedSlice"
},
"map": {
"type": "SharedSlice"
},
"cta_section": {
"type": "SharedSlice"
},
"features": {
"type": "SharedSlice"
},
"testimonial": {
"type": "SharedSlice"
},
"title_section": {
"type": "SharedSlice"
},
"cards": {
"type": "SharedSlice"
},
"form": {
"type": "SharedSlice"
}
}
}
}
}
}
}
Form json custom type
{
"id": "form",
"label": "Form",
"repeatable": true,
"status": true,
"json": {
"Main": {
"formId": {
"config": {
"label": "formId",
"placeholder": ""
},
"type": "Text"
},
"buttonText": {
"config": {
"label": "buttonText",
"placeholder": ""
},
"type": "Text"
},
"slices": {
"type": "Slices",
"fieldset": "Slice Zone",
"config": {
"choices": {
"form_input": {
"type": "SharedSlice"
}
}
}
}
}
}
}
Form slice
{
"id": "form",
"type": "SharedSlice",
"name": "Form",
"description": "Form",
"variations": [
{
"id": "default-slice",
"name": "Default slice",
"docURL": "...",
"version": "sktwi1xtmkfgx8626",
"description": "Form",
"primary": {
"title": {
"type": "StructuredText",
"config": {
"single": "heading1",
"label": "Title",
"placeholder": "This is where it all begins..."
}
},
"formLink": {
"config": {
"label": "form link",
"customtypes": [
"form"
],
"select": "document"
},
"type": "Link"
}
},
"items": {}
}
]
}
OK, so I noticed a couple of things wrong with your query.
When I looked at your API browser your Slice Zone API ID is slices and not body:
https://smallbydesign.prismic.io/api/v2/documents/search?ref=YedLOREAACoA6f28&q=[[at(my.page.uid%2C+"homepage")]]#format=json
I tested your query with the corrected body API ID as described here: API reference for GraphQuery (fetchLinks v2) - Prismic
The GraphQuery to your repo returned the error: Unable to parse fetch query Invalid fetch parsing Exception. Cannot find slice of type form
The absence of the form Slice was confirmed when I checked your API browser.
NOTE: when you do a GraphQuery you need to query all the content of your main page as well, not just the linked field.
Hi @Phil ,
Many thanks for the efforts. Good point regarding body vs slices - I didn't noticed this at first.
Yesterday, I changed the name of my slice from form to form_section in the attempt to see if there is a bug where if the custom type/slice/field is with the same name, it would result in an error. It didn't help however.
I just tried it with your recommendations, but I still get an error
export const formGQ = `{
page {
...pageFields
slices {
...on form_section {
non-repeat {
...non-repeatFields
}
}
}
}
}`;
Any idea why?
I'd be great if the error message is more helpful as I currently have no idea what I do right/wrong.
So I noticed a couple of things:
I realise this is not documented and I will get the team on this today. You are trying to do this with Slice Machine Slices which require 2 things:
a. That you specify the variation that you want to query like so variation{ ...ondefault-slice{
b. You use primary and item keys instead of non-repeat and repeat keys.
Your GraphQuery is more complicated than your imagining because you're trying to get the data from a Slice in a linked document from a link in a Slice of the parent document. So you need to go deeper. You full query should look like so:
{
page{
...pageFields
slices{
...on form_section{
variation{
...on default-slice{
primary{
formLink{
...on form{
slices{
...on form_input{
variation{
...on default-slice{
primary{
...primaryFields
}
}
}
}
}
}
}
}
}
}
}
}
}
}
and that's only one Slice from the linked document.
I was able to test this query in your API browser.
https://smallbydesign.prismic.io/api/v2/documents/search?ref=YedLOREAACoA6f28&q=[[at(my.page.uid%2C+"contact-us")]]&graphQuery={
page{
...pageFields
slices{
...onform_section{
variation{
...ondefault-slice{
primary{
formLink{
...onform{
slices{
...onform_input{
variation{
...ondefault-slice{
primary{
...primaryFields
}
}
}
}
}
}
}
}
}
}
}
}
}
}#format=json
There's better error reporting in the API Browser, I agree there could be better error messaging in the Client, I've made a feature request for this. To do this you need to encode your GraphQuery before adding it to the URL:
https://meyerweb.com/eric/tools/dencoder/
Your GraphQuery would go here:
https://smallbydesign.prismic.io/api/v2/documents/search?ref=YedLOREAACoA6f28&q=%5B%5Bat(my.page.uid%2C+%22contact-us%22)%5D%5D&graphQuery=[THIS IS WHERE YOUR QUERY GOES]#format=json
What is your use case for pulling contact forms in like this? Maybe there could be a better solution.
Thanks.
@Phil Amazing, this worked! Definitely the documentation needs to be updated to mention the changes for slice machine
I was able to make it slightly shorter using
page{
...pageFields
slices{
...on form_section{
variation{
...on default-slice{
primary{
title
formLink{
...on form{
...formFields
}
}
}
}
}
}
}
}
Also thanks a lot for the tips and help - the API browser is the way to go for now to build up the queries!
Regarding why I've created the Form logic in this way is because I wanted to:
Cool, that's a nice idea.
NOTE: So apparently v6 of the client has the error messaging I talked about above, though I think the messages coming from the API could be clearer, I'll look into this.
Let me know if you need anything else 
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!