Get related content via graphQuery doesn't work

Developing with Prismic
,
1

Hi, i just try to develop my first prismic project – a simple portfolio.

So i have Pages for every Project/Case, but also a Custom Type for ProjectTeaser with content realtions fields for image/stageimage, projecttitle and projecttagline.

No i want to query these data from the homepage to show a slider of Projectteasers there. But i can't get it to work.

my query looks like this atm:

const teasers = await client.getAllByType("projectteaser", {
    graphQuery: `{
      projectteaser {
        projecttitle {
          ...on Project {
            title
          }
        }
      }
    }`
  })

the definition of my project and projectteaser looks like this:
projectteaser

{
  "id": "projectteaser",
  "label": "ProjectTeaser",
  "format": "custom",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": {
        "config": {
          "label": "UID"
        },
        "type": "UID"
      },
      "linked_stageimage": {
        "type": "Link",
        "config": {
          "label": "LinkedStageImage",
          "select": "document"
        }
      },
      "linked_projecttitle": {
        "type": "Link",
        "config": {
          "label": "LinkedProjectTitle",
          "select": "document"
        }
      },
      "linked_projecttagline": {
        "type": "Link",
        "config": {
          "label": "LinkedProjectTagline",
          "select": "document"
        }
      }
    }
  }
}

project

{
  "id": "project",
  "label": "Project",
  "format": "page",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": {
        "config": {
          "label": "UID"
        },
        "type": "UID"
      },
      "slices": {
        "type": "Slices",
        "fieldset": "Slice Zone",
        "config": {
          "choices": {
            "stage": {
              "type": "SharedSlice"
            },
            "background": {
              "type": "SharedSlice"
            },
            "project_intro": {
              "type": "SharedSlice"
            }
          }
        }
      }
    },
    "SEO & Metadata": {
      "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"
      },
      "meta_title": {
        "config": {
          "label": "Meta Title",
          "placeholder": "A title of the page used for social media and search engines"
        },
        "type": "Text"
      }
    }
  }
}

second question is, if this is the way to go for my usecase, even if it works. Thanks for any help or nudge in the right dorection in advance :slight_smile:

2

Have you tried using fetchLinks instead of graphQuery?

Here's mine as an example:

const page = await client
    .getByUID('product', params.product, {
      fetchLinks: [
        'brand.description',
        'brand.logo',
        'brand.title',
        'product_type.title',
        'product_type.description',
        'product_type.featured_image',
        'service.title',
        'service.excerpt',
      ],
    })
    .catch(() => notFound())
1 Like
3

Hi @marianbreitmeyer ,

For GraphQueries, you always have to put the entire content of the parent document and then be sure to reference correctly the link field API ID, then the content you need from the linked document.

It's not what I would recommend to do here. On your index file in your project, I would do 2 queries, one for your homepage and one for your projects and build it out from there.

4

Yep, thanks for the advice. That's what i ended up doing. Works fine so far :)

1 Like