Query a single document

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 article discusses how to query one particular document of a given type.

The Query

To query a particular document, you have a predefined query field that you can use. You will need to pass the uid of your document as well as its lang.

Your Custom Type needs to have a UID field

Note that in order for this type of query to work, your Custom Type needs to have a UID field. This query won't work without it.

For example, let's say that you want to get the "title" and "subtitle" fields of a blog post (with the API ID of blog_post). In this example, the blog post we're looking for has the UID value of "prismic-with-gatsby" in the "en-us" language. You would use the following query:

Copy
query BlogPostQuery {
  prismic {
    blog_post(uid:"prismic-with-gatsby", lang:"en-us") {
      _meta {
        uid
        lang
      }
      title
      subtitle
    }
  }
}

Your query needs to include the lang attribute

Note that you must include the language even if you don't have any other languages in your repository. You can simply hard-code this in your query if you only have one language. If you have more than one language, then you can read more about how to query by language.

The returned data

When you perform a query like this, the data that is returned will be slightly different than performing a query for multiple documents (for example an allBlog_posts query). Specifically, your data will be returned without the edges or node layers in the data:

Copy
{
  "data": {
    "prismic": {
      "blog_post": {
        "_meta": {
          "uid": "prismic-with-gatsby",
          "lang": "en-us"
        },
        "title": [
          {
            "type": "heading1",
            "text": "How to use Prismic with Gatsby.js",
            "spans": []
          }
        ],
        "subtitle": [
          {
            "type": "heading2",
            "text": "A step-by-step tutorial on how to use these two tools together to build your website",
            "spans": []
          }
        ]
      }
    }
  }
}