@xbyorange/mercury-prismic

1.3.0 • Public • Published

Build status Coverage Status Quality Gate

NPM dependencies Last commit Last release

NPM downloads License

Mercury Logo Mercury Prismic

Overview

This package provides a Mercury origin for reading data from Prismic CMS API. As underlay, it uses the prismic-javascript client to provide the Prismic data.

Api

import { Prismic } from "@xbyorange/mercury-prismic"

new Prismic(url, options)

  • Arguments
    • url - <String>. Prismic api url.
    • options - <Object> Containing options:
      • defaultValue - <Any> Default value of origin until real data is returned.
      • fullResponse - <Boolean> If true, the full response of the Prismic api will be used as value. If false, only the response.results property will be returned, which is the default behavior.
      • release - <String> Prismic release to be read. This parameter will be passed as ref to the prismic-javascript query.
      • uuid - <String> Unique id to assign to the instance. Useful when using mercury sources handler.
      • tags - <String> or <Array of Strings> Tags to assign to the instance. Useful when using mercury sources handler. A "prismic" tag will be always added to provided tags by default.

Methods

query

prismic.query(queryObject)

  • Arguments
    • queryObject - <Object> containing properties:
      • documentType - <String> Prismic document type to filter by. (It will be used to build a prismic-javascript query as in PrismicJs.Predicates.at("document.type", documentType))
  • Returns - New queried instance having all common Mercury methods.

config

Configure instance for all next read executions.

prismic.config(options)

  • Arguments
    • options - <Object> containing properties:
      • url - <String> Prismic api url.
      • fullResponse - <Boolean> If true, the full response of the Prismic api will be used as value. If false, only the response.results property will be returned, which is the default behavior.
      • release - <String> Prismic release to be read. This parameter will be passed as ref to the prismic-javascript query.

Read about how to configure all mercury-prismic instances at a time using the mercury sources handler.

Example of how to change all mercury-api requests urls at a time:

import { sources } from "@xbyorange/mercury";

sources.getByTag("prismic").config({
  url: "https://foo-prismic-repository.cdn.prismic.io/api/v2"
});

// All mercury-prismic instances will now be configured to request to provided url.

Example

Next example will be easier to understand if you are already familiarized with the mercury syntax.

import { Prismic } from "@xbyorange/mercury-prismic";

const prismic = new Prismic("https://foo-prismic-repository.cdn.prismic.io/api/v2", {
  release: "foo-release"
});

prismic
  .query({ documentType: "home-banner" })
  .read()
  .then(results => {
    console.log("Prismic content for home banner in foo-release", results);
  });

Usage with frameworks

React

Please refer to the react-mercury documentation to see how simple is the data-binding between React Components and Mercury Prismic.

Connect a source to all components that need it. Mercury will fetch data only when needed, and will avoid making it more than once, no matter how many components need the data.

Package Sidebar

Install

npm i @xbyorange/mercury-prismic

Weekly Downloads

0

Version

1.3.0

License

Apache-2.0

Unpacked Size

28 kB

Total Files

6

Last publish

Collaborators

  • xbyorange