Graph Query: Get Relationship inside Repeatable inside Slice of Page

Developing with Prismic
, ,
1

Hi,
As the title says, I have a "home" Page (Single Type), which has a "home_tickets" Slice.
This slice has a "tickets" Repeatable Group, this group has a single "ticket_type" Content Relationship field. This relationship has a few basic fields like a "name, price, link, etc..."

No matter how hard I try, I cannot figure out to get the fields of the relationship using Graph Query.
Here is my query:

const { data: page } = useAsyncData('home', () => {
    return prismic.client.getSingle('home', {
        graphQuery: `{
          home {
            slices {
              ...on home_tickets {
                variation {
                  ...on default {
                    primary {
                      tickets {
                        ...on ticket_type {
                          name
                          price
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }`,
        lang: "fr-ca",
    });
});

Here is the "home" customtype:

{
    "format": "page",
    "id": "home",
    "label": "Home",
    "repeatable": false,
    "status": true,
    "json": {
        "Main": {
            "slices": {
                "type": "Slices",
                "fieldset": "Slice Zone",
                "config": {
                    "choices": {
                        "home_tickets": {
                            "type": "SharedSlice"
                        },
                        "partners_grid": {
                            "type": "SharedSlice"
                        },
                        "home_programming": {
                            "type": "SharedSlice"
                        }
                    }
                }
            }
        },
        "SEO & Metadata": {
            "meta_title": {
                "config": {
                    "label": "Meta Title",
                    "placeholder": "A title of the page used for social media and search engines"
                },
                "type": "Text"
            },
            "meta_description": {
                "config": {
                    "label": "Meta Description",
                    "placeholder": "A brief summary of the page"
                },
                "type": "Text"
            },
            "meta_image": {
                "config": {
                    "constraint": {
                        "height": 1260,
                        "width": 2400
                    },
                    "label": "Meta Image",
                    "thumbnails": []
                },
                "type": "Image"
            }
        }
    }
}

Here is the "home_tickets" slice model:

{
  "id": "home_tickets",
  "type": "SharedSlice",
  "name": "HomeTickets",
  "description": "HomeTickets",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "title": {
          "type": "Text",
          "config": {
            "label": "title",
            "placeholder": ""
          }
        },
        "tickets": {
          "type": "Group",
          "config": {
            "label": "tickets",
            "repeat": true,
            "fields": {
              "ticket_type": {
                "type": "Link",
                "config": {
                  "label": "ticket_type",
                  "select": "document",
                  "repeat": false,
                  "customtypes": [
                    "ticket_types"
                  ]
                }
              }
            }
          }
        }
      },
      "items": {}
    }
  ]
}

Here is the "ticket_type" customtype:

{
    "format": "custom",
    "id": "ticket_types",
    "label": "Ticket types",
    "repeatable": true,
    "status": true,
    "json": {
        "Main": {
            "uid": {
                "type": "UID",
                "config": {
                    "label": "UID"
                }
            },
            "name": {
                "type": "Text",
                "config": {
                    "label": "name",
                    "placeholder": ""
                }
            },
            "price": {
                "type": "Number",
                "config": {
                    "label": "price",
                    "placeholder": ""
                }
            },
            "inclusions": {
                "type": "Group",
                "config": {
                    "label": "inclusions",
                    "repeat": true,
                    "fields": {
                        "item": {
                            "type": "Text",
                            "config": {
                                "label": "item",
                                "placeholder": ""
                            }
                        }
                    }
                }
            },
            "link": {
                "type": "Link",
                "config": {
                    "label": "link",
                    "placeholder": "",
                    "select": null,
                    "allowTargetBlank": false,
                    "allowText": false,
                    "repeat": false
                }
            }
        }
    }
}
2

Currently, this query returns an HTTP 400 Bad Request with absolutely no pointer to what is wrong.

3

I got it working like this, but not it only returns my "home_tickets" slice and not any of my other slices:

const { data: page } = await useAsyncData('index', () => {
    return prismic.client.getSingle('home', {
        graphQuery: `{
            home {
                slices {
                    ...on home_tickets {
                        variation {
                            ...on default {
                                primary {
                                    ...primaryFields
                                    tickets {
                                        ticket_type {
                                            ...ticket_typeFields
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }`,
        lang: `${locale.value}-ca`,
    });
});

I tried adding ...sliceFields but it did not work.
Not sure if I'm required to redefine all the fields inside the graphQuery now

4

lad to hear you got the first part working!

Have you tried using ...items to access the repeatable zone inside the slice? like this:

tickets {
  ...items
}

We have an example of this query in the docs, where fields inside a repeatable zone in Slice Machine are accessed using items instead of primary