Using content relationship field (inside slice)

Developing with Prismic
, ,
1

Hello,

I have a custom type called Product. Inside that custom type I have several slices. One of the slices, called RelatedProducts has a Content relationship field which has a contraint on custom type Product.

In my component for these related products I would like to show an image of the product, title and price but I can't seem to get the data.
I have read the GraphQuery and tried to get the data but to no avail. I either get an error or I get the same data like in the original request.

This is part of my original response - RelatedProducts slice. I would like to get the proper data for products inside this slice.

{
  "primary": {
    "title": [
      {
        "type": "heading2",
        "text": "Slični proizvodi",
        "spans": []
      }
    ]
  },
  "items": [
    {
      "products": {
        "id": "Y1fG7xQAACUAZxrR",
        "type": "product",
        "tags": [],
        "lang": "hr",
        "slug": "yamaha-yp20g",
        "first_publication_date": "2022-10-25T11:22:49+0000",
        "last_publication_date": "2022-10-26T08:06:11+0000",
        "uid": "yamaha-yp20g",
        "link_type": "Document",
        "isBroken": false
      }
    }
  ],
  "id": "related_products$e55d4735-2b31-48dc-8745-73fc3d9dafef",
  "slice_type": "related_products",
  "slice_label": null
}

I'm sure I'm missing something but cannot figure exactly what. Thank you for your help.

4

Hey @andrea, can you post the JSON of the product Custom Type and your Graphquery?

5

I did something similar for my header navigation with some nested content relationships:

return await graphQLClient.query({
        query: gql`query {
            allNavigations(uid: "header") {
                edges{
                    node {
                        logo
                        _linkType
                        items {
                            label
                            link {
                                _linkType
                                ... on Page {
                                    meta_title
                                    _meta {
                                        uid
                                        id
                                        type
                                    }
                                    children {
                                        child {
                                            ... on Page {
                                                _meta {
                                                    uid
                                                    id
                                                    type
                                                }
                                            }
                                        }
                                        label
                                    }
                                }
                                ... on _ExternalLink{
                                    url
                                    target
                                }
                            }
                        }
                    }
                }
            }
        }`,
    });

I think I'll stick to my hydration method by building the mapped items array on a slice. i.e. Hydarating relationship links - #2 by Acen

6

Product Custom Type

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "UID"
      }
    },
    "product_title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Product title"
      }
    },
    "product_code" : {
      "type" : "Text",
      "config" : {
        "label" : "Product code",
        "placeholder" : "Product code"
      }
    },
    "category" : {
      "type" : "Link",
      "config" : {
        "select" : "document",
        "customtypes" : [ "category" ],
        "label" : "Category",
        "placeholder" : "Product category"
      }
    },
    "subcategory" : {
      "type" : "Link",
      "config" : {
        "select" : "document",
        "customtypes" : [ "category" ],
        "label" : "Subcategory",
        "placeholder" : "Product subcategpry"
      }
    },
    "price" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "value" : {
            "type" : "Number",
            "config" : {
              "label" : "Value",
              "placeholder" : "Product price value"
            }
          },
          "currency" : {
            "type" : "Select",
            "config" : {
              "options" : [ "HRK", "EUR" ],
              "default_value" : "HRK",
              "label" : "Currency",
              "placeholder" : "Product price currency"
            }
          }
        },
        "label" : "Price"
      }
    },
    "disclaimer" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph,strong,em,rtl",
        "allowTargetBlank" : true,
        "label" : "Disclaimer",
        "placeholder" : "Pricing disclaimer"
      }
    },
    "pricing_date" : {
      "type" : "Date",
      "config" : {
        "label" : "Pricing date",
        "placeholder" : "Date from which the current price is valid"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : null,
        "choices" : {
          "technical_specifications" : {
            "type" : "Slice",
            "fieldset" : "TechnicalSpecifications",
            "description" : "Product's technical specifications",
            "icon" : "list",
            "display" : "list",
            "non-repeat" : {
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2,heading3",
                  "label" : "Title",
                  "placeholder" : "Section title"
                }
              }
            },
            "repeat" : {
              "name" : {
                "type" : "Text",
                "config" : {
                  "label" : "Name",
                  "placeholder" : "Technical specification name"
                }
              },
              "value" : {
                "type" : "Text",
                "config" : {
                  "label" : "Value",
                  "placeholder" : "Technical specification value"
                }
              }
            }
          },
          "related_products" : {
            "type" : "Slice",
            "fieldset" : "RelatedProducts",
            "description" : "Related products",
            "icon" : "add_circle",
            "display" : "list",
            "non-repeat" : {
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2,heading3",
                  "label" : "Title",
                  "placeholder" : "Section title"
                }
              }
            },
            "repeat" : {
              "products" : {
                "type" : "Link",
                "config" : {
                  "select" : "document",
                  "customtypes" : [ "product" ],
                  "label" : "Products",
                  "placeholder" : "Related products"
                }
              }
            }
          },
          "details_list" : {
            "type" : "Slice",
            "fieldset" : "DetailsList",
            "description" : "List of product details",
            "icon" : "format_list_bulleted",
            "display" : "list",
            "non-repeat" : {
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2,heading3",
                  "label" : "Title",
                  "placeholder" : "Section title"
                }
              }
            },
            "repeat" : {
              "details" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph,strong,em,list-item,o-list-item,rtl",
                  "allowTargetBlank" : true,
                  "label" : "Details",
                  "placeholder" : "Product details"
                }
              }
            }
          },
          "characteristics" : {
            "type" : "Slice",
            "fieldset" : "Characteristics",
            "description" : "Product characteristics",
            "icon" : "edit",
            "display" : "list",
            "non-repeat" : {
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2,heading3",
                  "label" : "Title",
                  "placeholder" : "Section title"
                }
              }
            },
            "repeat" : {
              "heading" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading3,heading4,heading5,heading6",
                  "label" : "Heading",
                  "placeholder" : "Characteristic's heading"
                }
              },
              "description" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
                  "allowTargetBlank" : true,
                  "label" : "Description",
                  "placeholder" : "Characteristic's description"
                }
              }
            }
          },
          "overview" : {
            "type" : "Slice",
            "fieldset" : "Overview",
            "description" : "Product overview",
            "icon" : "accessibility",
            "display" : "list",
            "non-repeat" : {
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2,heading3",
                  "label" : "Title",
                  "placeholder" : "Section title"
                }
              },
              "description" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
                  "allowTargetBlank" : true,
                  "label" : "Description",
                  "placeholder" : "Product summary"
                }
              }
            },
            "repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : { },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              },
              "alt_text" : {
                "type" : "Text",
                "config" : {
                  "label" : "Alt text",
                  "placeholder" : "Alternative text"
                }
              }
            }
          }
        }
      }
    }
  }
}

For the GraphQuery I tried something like this query: Content relationship fields inside a group - #3 by Levi
When using this this I just get the same response. I tried modifying the query in many ways to get all the data but I get the error that 'data' is not defined.
I just need a little help to understand how exactly this should work.

7

I managed to figure it out. There is just one thing now - is there a way to get all of the slices without writing each one separately like this?

const graphQuery = `{
  product {
    ...productFields
    body {
      ...on overview {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
      ...on details_list {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
      ...on characteristics {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
      ...on technical_specifications {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
      ...on related_products {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          product {
            ...on product {
              ...productFields
            }
          }
        }
      }
    }
   }
}`;
8

That's good to hear!
Yes, it isn't possible to get all the Slices' content using a single union. You need to specify each section.