Retrieve Links & Content Relationships

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

This page will show you how to retrieve the content from the Link, Link to Media, and Content Relationship fields.

The Link field has four types: Link.document, Link.image, Link.file, and Link.web. In the following example, we are querying the page that has the UID test-page. The API ID of the Link field is page_link. We are also specifying the _linkType field so that we can see the field names we need to use in the next step of this process.

Copy
query MyQuery {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          page_link {
            _linkType
          }
        }
      }
    }
  }
}

Next we need to add a Union type in order to specify which fields we need for each link type. The Union type will look something like this: ... on _ExternalLink

There are three different types of links:

  • External link - This is a link to the web in the form of a full website url, a phone link, or an email link. The union type for this is specified as _ExternalLink.
  • Media item link - This is a link to an item from your Prismic repository's Media Library. The union type for this is specified as _FileLink or _ImageLink.
  • Document link - This is a link to document in your Prismic repository. The union type for this depends on the name of the linked document. This is shown below.

Here is an example that will give you different results depending on the type of the link. In this case you could get content from an External link, Media link, or a Document link to a "page" type.

Copy
query MyQuery {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          page_link {
            _linkType
            ... on PRISMIC_Page {
              _meta {
                uid
              }
            }
            ... on PRISMIC__ExternalLink {
              url
            }
            ... on PRISMIC__ImageLink {
              _linkType
              url
              height
              name
              width
              size
            }
            ... on PRISMIC__FileLink {
              url
              size
              name
            }
          }
        }
      }
    }
  }
}

Check out this page if you want to see how to render Links in your Gatsby project.

The Link to a Media field is a specific Link field that only allows the content author to select a media link. Therefore, you only have to specify the union type for Prismic__ImageLink and Prismic__FileLink. Here is how to fetch Link to Media field. In this case, the API ID of the field is media_link.

Copy
query MyQuery {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          media_link {
            ... on PRISMIC__ImageLink {
              url
              _linkType
            }
            ... on PRISMIC__FileLink {
              url
              _linkType
            }
          }
        }
      }
    }
  }
}

Check out this page if you want to see how to render a Link to Media field in your Gatsby project.

Retrieve a Content Relationship field

The Content Relationship field is a specific type of Link field that allows a content author to only select a link to another Prismic document. Content Relationship fields allow you to retrieve linked documents content by specifying what you want from each possible linked type.

In this example we will fetch content from either a Linked_page document or a Blog_post document. The API ID of this Content Relationship field is related_content.

Copy
query MyQuery {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
         related_content {
            ... on PRISMIC_Linked_page {
              page_title
              description
            }
            ... on PRISMIC_Blog_post {
              title
              publication_date
            }
          }
        }
      }
    }
  }
}

Check out this page if you want to see how to render Content relationship fields.