Not able to query slice-machine slices with graphQuery

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.

1 Like

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:

  1. a classic GraphQueryTestPrismicDashboard slice created through the dashboard.
  2. a 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.

  1. 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

  2. I tested your query with the corrected body API ID as described here: API reference for GraphQuery (fetchLinks v2) - Prismic

  3. 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:

  1. 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.

  2. 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.

1 Like

@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:

  • have reusable forms across the website (thus created the Form custom type)
  • have variation for fields
  • Have the ability have radio boxes/check boxes (meaning I could use a simple group field)
1 Like

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 :slight_smile:

Hey @Phil :wave:

Reopening this thread because I'm going through a very similar scenario with no success.

Our new Prismic-based blog will rely on a strong relationship between content so I've spent the day getting my head around GraphQuery.

Now, I can only be missing something very glaring because I'm having pretty much the same issue as @kris but his solution didn't work for me.

At a Page document I need to get information about an Article, that was manually selected via a Content Relationship on a Shared Slice.

I'm trying this query, but can get past the 500 error:

{
    page {
      ...pageFields
      body {
        ...on content_collection {
          variation {
            ...on withFeatured {
              primary {
                title
                featured {
                  ...on article {
                    ...articleFields
                  }
                }
              }
            }
          }
        }
      }
    }
  }

I've got to make the relationship work with regular, dashboard-built slices, but couldn't make it work with slice machine ones. This is the page I'm using to test it. Can you give me some help?

Hi Vitor,

I spent a long time investigating this and I'm not 100% sure, but I think the error is related the fact the content_collection Slice API ID contains an underscore _.

Can you try changing it and republishing the document to test this?

I'll try and get more info from the team.

Thanks.

Hey Phil,

Still no luck :frowning:

Here's what I did to try and isolate the issue

  1. Created a slice (via Slice Machine) called testcollection and added a Content Relationship with (featured as key) to it
  2. Created a new page and added the slice to it

If I query that page via API explorer, it shows the slice inside data.body.

If add a simple

{
  page {
    slug
  }
}

it works just fine and we only see slug inside data. A proof that a very basic graphQuery works.

However, if I try this graphQuery, it brings up a 500 error:

{
  page {
    ...pageFields
    body {
      ...on testcollection {
        variation {
          ...on default-slice {
            primary {
              featured {
                ...on article {
                  ...articleFields
                }
              }
            }
          }
        }
      }
    }
  }
}

I'm afraid I'm reaching some kind of edge-case here :slightly_frowning_face:

In another note, should I try to do that with the GraphQL API instead of using graphQuery with REST? If multi-level relationships queries are supported in the GraphQL API I would gladly make the switch.

Hey Vitor,

Yes, this is a strange one, as I did tests like yourself and it seems to be failing on your Slice Machine Slices, but working for legacy Slices. It's definitely an edge case like you're suggesting, I'm still looking into it with the team because this is a weird one.

I don't know if I would recommend it simply because I don't have much experience in terms of using it with Next.js (I guess this is your framework).

Although if you are comfortable with migrating your project to get around this blocker then I would say to test the query in the GraphQL browser first to make sure it's not breaking there as well:
https://getcircuit.prismic.io/graphql

I'll get back to you when I know more.

Thanks.

1 Like

Hey Phil,

Here's some good news. This GraphQL query (from now on I'll bold this term to prevent confusion with graphQuery) works and returns exactly what I need:

{
  page(uid: "internal-new-slices", lang: "en-us") {
    slug
    body {
      ... on PageBodyContent_collection {
        variation {
          ... on PageBodyContent_collectionWithfeatured {
            primary {
              featured {
                ... on Article {
                  title
                  primary_category {
                    ... on Category {
                      name
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

So, the good news is that something works and I have not been cursed by the gods of data fetching (yet). I'm still puzzled about the graphQuery not working, though. If I had to guess I'd say it is something with the syntax :thinking:.

Anyway, I'm still not 100% sure that the GraphQL API will solve all my problems but it is refreshing to see something working :smile:. LMK what the team has to say about it and once again, thanks for the help :muscle: