@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.

    Install

    npm i @xbyorange/mercury-prismic

    DownloadsWeekly Downloads

    4

    Version

    1.3.0

    License

    Apache-2.0

    Unpacked Size

    28 kB

    Total Files

    6

    Last publish

    Collaborators

    • xbyorange