Querying Prismic Content

The Client Package and Helper Functions


[00:00] The client library makes using the API a simpler task. It does this by doing complex REST API requests as simple JavaScript methods that retrieve content.

[00:08] This library was installed in your project by the Slice Machine Install command, which we performed earlier.

[00:13] It provides tools for connecting your Next.js project to the Prismic API, like the createClient method, which accepts your repository name and gets the latest version of your content by automatically using the master ref identifier.

[00:25] If you were hitting the REST API URL directly, you would have to update the ref identifier every time the content is updated, but thankfully, the client package and createClient method do this for you.

[00:34] The client library gives you methods for querying single or multiple pages with getAllByType,

[00:40] getAllByType,

[00:44] getAllByTag,

[00:51] getByUID,

[00:56] getSingle.

[01:01] It also provides queries to get the results you need with the filter methods, like

[01:05] 'not': for excluding certain documents

[01:09] 'any': to provide a list of possible matches and more advanced use cases.

[01:14] Overall, the client simplifies the process of retrieving and working with content from Prismic in a JavaScript based project, allowing developers to focus on building their applications rather than worrying about the underlying API.

The client library makes using the API easier. Here are some of the methods. For a full list, visit the docs.

Setup functions:

  • prismic.getRepositoryEndpoint(repoName)
  • prismic.getRepositoryName(repositoryEndpoint)
  • prismic.createClient(endpoint, options)

Queries for single or multiple pages with query methods include:

  • client.getAllByType('documentType')
  • client.getAllByTag('Tag')
  • client.getByUID('Type', 'UID')
  • client.getSingle('Type')

Filter queries:

  • prismic.predicate.not( path, value )
  • prismic.predicate.any( path, values )
  • prismic.predicate.numberLessThan( path, value )

Repository methods:

  • client.queryLatestContent() - default
  • client.queryContentFromReleaseByLabel(label)

Practice Activity

Try to complete the following tasks.

  • Retrieve all documents for the 'post' type using 'getAllByType'.
  • Retrieve a single document for the 'blog_home' type using 'getSingle'.

Answer to continue

Quiz banner

What repo name is used in the StackBlitz above?

What football team is the blog about?