GraphQuery Content Relationship Sub Fields in Slice

Developing with Prismic
1

Hi all, thanks in advance for taking the time to help with this.

I've been reviewing documentation and forum questions for a while now and am still stumped on how to get a graphquery to work for content relationships in a slice.

The following is the graphquery I'm using on the homepage (and hopefully other pages) to display items from the linked page-type with their featured image.

// Get homepage content
const { data: page } = await useAsyncData("page_home", () =>
  prismic.client.getSingle("home", {
    graphQuery: `{
      home {
        slices {
          ...on product_carousel {
            variation {
              ...on default {
                primary {
                  products {
                    ...on product {
                      image,
                      category
                    }
                  }
                }
              }
            }
          }
        }
      }
    }`,
  })
)

Slice model:

{
  "id": "product_carousel",
  "type": "SharedSlice",
  "name": "ProductCarousel",
  "description": "ProductCarousel",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "label": {
          "type": "Text",
          "config": {
            "label": "Label",
            "placeholder": ""
          }
        },
        "copy": {
          "type": "StructuredText",
          "config": {
            "label": "Copy",
            "placeholder": "",
            "allowTargetBlank": true,
            "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
          }
        },
        "buttons": {
          "type": "Group",
          "config": {
            "label": "Buttons",
            "repeat": true,
            "fields": {
              "link": {
                "type": "Link",
                "config": {
                  "label": "Link",
                  "placeholder": "",
                  "allowTargetBlank": true,
                  "select": null,
                  "allowText": true
                }
              }
            }
          }
        },
        "section": {
          "type": "Link",
          "config": {
            "label": "Section",
            "select": "document",
            "customtypes": [
              "section"
            ]
          }
        },
        "category": {
          "type": "Link",
          "config": {
            "label": "Category",
            "select": "document"
          }
        },
        "products": {
          "type": "Group",
          "config": {
            "label": "Products",
            "repeat": true,
            "fields": {
              "product": {
                "type": "Link",
                "config": {
                  "label": "product",
                  "select": "document",
                  "customtypes": [
                    "product"
                  ]
                }
              },
              "image": {
                "type": "Image",
                "config": {
                  "label": "Image",
                  "constraint": {},
                  "thumbnails": []
                }
              }
            }
          }
        }
      },
      "items": {}
    }
  ]
}

Can anyone recommend a way to debug it? I've tried adding an empty graphquery and it still causes a 404.

If anyone can help me to get a toehold on this thing it would be much appreciated. What am I missing?

Thanks!

  • Adam
2

Got around the issue with a Vuex composable:

export const useProductsById = ( $ids ) => {
    const prismic = usePrismic()

    return useAsyncData("$products", () => prismic.client.getAllByIDs( $ids, {
        fetchLinks: [
            'product.image',
            'product.section',
            'product.category',
        ],
    })).data;
}

& in the slice component:

const props = defineProps(
  getSliceComponentProps<Content.ProductCarouselSlice>([
    "slice",
    "index",
    "slices",
    "context",
  ]),
);

const products = useProductsById( props.slice.primary.products.map( (item) => item.product.id ) );
2 Likes
3

Hi @adam7,

Well done, and thanks for letting us know how you figured it out! It might help a couple of users down the line :slight_smile: