National Pest Management

    @data-provider/prismic

    4.0.0 • Public • Published

    Data Provider logo

    Build Status Coverage Quality Gate Downloads Renovate License


    Overview

    This package provides a Data Provider 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 "@data-provider/prismic"

    new Prismic(options)

    • Arguments
      • options - <Object> Apart from common Data Provider options, this addon has next custom options:
      • 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.

    Methods

    query

    prismic.query(queryValue)

    • Arguments
      • queryValue - <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 Data Provider 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 @data-provider/prismic instances at a time using the Data Provider providers handler.

    Example of how to change all @data-provider/prismic requests urls at a time:

    import { providers } from "@data-provider/core";
    
    providers.getByTag("prismic").config({
      url: "https://foo-prismic-repository.cdn.prismic.io/api/v2"
    });
    
    // All @data-provider/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 Data Provider syntax.

    import { Prismic } from "@data-provider/prismic";
    
    const prismic = new Prismic({
      url: "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 @data-provider/react UI addon documentation to see how simple is the data-binding between React Components and @data-provider/prismic.

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

    Tags

    Providers created with this addon will have automatically the prismic tag, so you can select all of them together using the providers methods as in:

    import { providers } from "@data-provider/core";
    
    providers.getByTag("prismic").cleanCache();

    Contributing

    Contributors are welcome. Please read the contributing guidelines and code of conduct.

    Install

    npm i @data-provider/prismic

    DownloadsWeekly Downloads

    36

    Version

    4.0.0

    License

    Apache-2.0

    Unpacked Size

    35.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • javierbrea