@data-provider/prismic

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.